Pourquoi refaire le rendu sans changer les accessoires ou l'état ?

Question

Nous avons une application très simple qui contient simplement un useEffect, qui contient un console.log("first"). Le problème est que je veux que console.log("first") ne s'imprime qu'une fois lors de l'exécution, mais je ne sais pas pourquoi le nouveau rendu se produit et il s'imprime deux fois. S'il vous plaît, guidez-moi, merci.

exporter la fonction par défaut App() {
  useEffect(() => {
    console.log("premier");
  }, []);

  retour (
    

      
Bonjour CodeSandbox
      
Commencez le montage pour voir un peu de magie opérer !
    
  );
}
https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx
            

Answer 1

Il s'agit d'une nouvelle fonctionnalité du mode strict de React 18 et ce comportement est intentionnel. La raison principale de cette nouvelle fonctionnalité est de rappeler aux développeurs d'ajouter des fonctions de nettoyage dans les fonctions de traitement des effets. Donc, fondamentalement, le composant sera monté deux fois, ce qui signifie qu'il est monté, démonté et remonté. Cependant, il est important de savoir que ce comportement n’est observé qu’en mode développement et ne se produit pas dans les versions de production. Pour vérifier le comportement en mode développement, ajoutez une fonction de nettoyage à votre gestionnaire d'effets et essayez de consigner quelque chose. Par exemple :

export default function App() {
  useEffect(() => {
    console.log("first");

    return () => console.log("Unmount App");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Maintenant, l'ordre des journaux ressemblera à ceci :

first
Unmount App
first

De cette façon, les développeurs peuvent garantir que les composants ne sont pas sujets aux erreurs et effectuer un nettoyage approprié lorsque les composants sont désinstallés. Pour mieux comprendre cela, vous pouvez vous référer à cet exemple démontré dans la documentation. Si vous souhaitez en savoir plus sur le travail de nettoyage dans la fonction de gestionnaire d'effets, veuillez vous référer à cet article.