Pourquoi un composant s'affiche-t-il deux fois à chaque mise à jour d'état en mode strict ?

Comprendre les mises à jour d'état et le rendu des composants

Bien que le mode strict n'ait pas été explicitement activé, le problème du rendu d'un composant deux fois à chaque mise à jour d'état provient de l'utilisation du mode strict de React.

Dans React, le composant App est enveloppé dans React.StrictMode :

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Selon la documentation de React :

Strict Le mode ne peut pas détecter automatiquement les effets secondaires pour vous, mais il peut vous aider à les repérer en les rendant un peu plus déterministes. Cela se fait en invoquant intentionnellement deux fois les fonctions suivantes :

• Fonctions de mise à jour d'état (le premier argument de setState)
• Fonctions transmises à useState, useMemo ou useReducer

Dans votre exemple, la fonction chaneNumber passée au gestionnaire onClick déclenche une mise à jour de l'état à l'aide de useState. Par conséquent, React invoque intentionnellement cette fonction en mode développement. C'est ce qui provoque le rendu du composant deux fois à chaque mise à jour d'état.

Ce comportement est destiné à aider les développeurs à identifier les effets secondaires potentiels ou les problèmes de performances causés par les mises à jour d'état. En exécutant la fonction deux fois, React garantit que tous les effets secondaires se produisent deux fois, ce qui facilite le débogage et la résolution des problèmes potentiels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!