Pourquoi mon composant React est-il rendu deux fois en mode strict ?

Pourquoi mon composant React est-il rendu deux fois ?

Question :

Un composant React est rendu deux fois malgré un fonctionnement apparemment correct. Dans un premier temps, il affiche un numéro de téléphone et des points zéro, suivi d'un deuxième rendu avec toutes les données nécessaires. Quelle est la cause de ce problème ?

Réponse :

Ce comportement est probablement dû à l'exécution de l'application en mode strict.

Le mode strict est un indicateur facultatif dans React qui permet d'identifier les effets secondaires potentiels dans la phase de rendu. Lorsqu'il est activé, il appelle intentionnellement certaines fonctions deux fois, telles que la méthode de rendu, pour mettre en évidence toute conséquence involontaire.

Dans ce cas, le nouveau rendu inattendu est provoqué par l'utilisation de React.StrictMode, qui double l'invocation de la fonction de rendu. Pour résoudre le problème, commentez la balise de mode strict dans index.js pour la désactiver pendant le développement.

Informations supplémentaires :

React.StrictMode peut aider à détecter les effets secondaires dans la phase de rendu, comme les interactions avec le DOM ou les mises à jour d'état. En appelant intentionnellement des fonctions deux fois, cela met en évidence tout comportement inattendu qui pourrait autrement être négligé.

La documentation officielle de React.StrictMode fournit plus d'informations sur les causes potentielles du nouveau rendu en mode strict :

https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

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!