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
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.
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