Pourquoi le mode strict et useState provoquent-ils des rendus de composants multiples ?

Pourquoi useState provoque-t-il le rendu du composant plusieurs fois au cours d'une mise à jour ?

Dans l'extrait de code fourni, le composant App est encapsulé dans React.StrictMode, ce qui permet mode strict. Dans ce mode, React appelle intentionnellement diverses fonctions, notamment :

• Corps des composants de fonction
• Fonctions transmises à useState, useMemo ou useReducer

Dans votre cas, la fonction chaneNumber est invoquée deux fois en raison de l'utilisation de useState. Chaque invocation de cette fonction déclenche une mise à jour de l'état, provoquant un nouveau rendu du composant.

Solution :

Évitez d'encapsuler le composant App dans React.StrictMode. Cela empêchera la double invocation de la fonction de changement d'état, ce qui entraînerait le rendu du composant une seule fois lors d'une mise à jour.

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!