"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Por que useState renderiza componentes duas vezes no modo estrito?

Por que useState renderiza componentes duas vezes no modo estrito?

Publicado em 2024-11-09
Navegar:231

Why Does useState Render Components Twice in Strict Mode?

Compreendendo as renderizações duplas em useState

No React, o gancho useState é comumente usado para gerenciar o estado do componente. No entanto, sob certas condições, você pode perceber que um componente renderizado com useState é renderizado duas vezes para cada atualização de estado. Esse comportamento confundiu muitos desenvolvedores que não ativaram o Modo Estrito. Por que isso ocorre?

A função do modo estrito

Ao contrário da suposição de que o modo estrito não está ativado, seu código está realmente sendo executado sob suas restrições. Por padrão, as versões modernas do React envolvem implicitamente o componente mais externo em um elemento . Este modo aprimora a depuração e destaca possíveis problemas de desempenho.

Invocação de função dupla no modo estrito

A documentação do React afirma explicitamente que o modo estrito "invoca duas vezes" intencionalmente certas funções, incluindo as funções do atualizador de estado passadas para setState e useState. Isso significa que sempre que você chamar setNumber em seu código, ele será invocado duas vezes.

Consequências da invocação dupla

Essa invocação dupla faz com que o componente seja renderizado duas vezes. Esse comportamento tem como objetivo ajudar os desenvolvedores a identificar possíveis efeitos colaterais, tornando-os mais determinísticos. Por padrão, o React adia as atualizações ao usar o gancho useState. No entanto, o Modo Estrito ignora esse comportamento, fazendo com que a renderização ocorra duas vezes.

Conclusão

Em resumo, a renderização dupla de componentes usando useState é uma consequência da execução do seu código no modo estrito do React. Embora possa parecer inesperado, esse comportamento é intencional e projetado para aprimorar os recursos de depuração, tornando os efeitos colaterais mais aparentes.

Declaração de lançamento Este artigo foi reimpresso em: 1729694788 Se houver alguma violação, entre em contato com [email protected] para excluí-lo
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3