React : à quelle fréquence une fonction de nettoyage s'exécute-t-elle ?

Les composants React avec des variables d'état déclenchent un nouveau rendu lorsque ces variables sont mises à jour. Ceci est attendu et constitue l’une des fonctionnalités principales de React. De plus, les composants offrent une fonction de nettoyage, qui est déclenchée chaque fois que le composant est « démonté ». Mais à quelle fréquence cette fonction de nettoyage s’exécute-t-elle réellement ?

Eh bien, comme nous l'explorerons dans cette démo, la fonction de nettoyage peut avoir plusieurs déclencheurs, mais un déclencheur courant est la mise à jour d'une variable d'état lorsqu'elle est liée à un effet secondaire.

En bref, si votre composant React utilise useEffect et suit une variable d'état spécifique, regardons l'exemple suivant :

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

La fonction de nettoyage sera appelée à chaque fois que le compteur est mis à jour.

Lorsqu'une variable d'état est mise à jour, React restitue le composant, ce qui signifie qu'il doit d'abord le « supprimer », puis le « restituer » à nouveau. Alors que le DOM virtuel optimise les nœuds qui doivent être mis à jour, au niveau logique, la fonction de nettoyage est toujours appelée.

Dans la plupart des cas, c'est bien et attendu. Cependant, si votre fonction de nettoyage effectue des tâches telles que signaler des événements, supprimer des écouteurs, etc., assurez-vous que c'est intentionnel, car la fonction de nettoyage sera appelée plusieurs fois en fonction de la variable d'état.

Démo

Voyons une démo.

• Dans les outils de développement, ouvrez la console.
• Vous remarquerez deux journaux :

Child mounted
Page mounted

Cela signifie que les deux composants, Page et Child, ont été rendus.

• Si vous vous souvenez de l'extrait partagé ci-dessus, useEffect est lié au compteur, qui est incrémenté lorsque vous cliquez sur le premier bouton. À l'heure actuelle, il devrait indiquer : Incrémentation de 0. Allons-y et cliquons dessus.

• Gardez un œil sur la console et remarquez comment quatre journaux ont été ajoutés :
  

Child unmounted
Page unmounted
Child mounted
Page mounted

Le compteur de variable d'état a été mis à jour, et comme il y a deux hooks useEffect liés au compteur, cela signifie que leurs fonctions de nettoyage ont été exécutées. Remarquez comment, pour le composant Page, useEffect est lié à la variable d'état, tandis que pour le composant Child, l'effet secondaire est lié à une variable prop, où la source est toujours la même variable d'état du compteur.

De plus, vous pouvez voir le bouton Flag Off, qui met à jour une autre variable d'état qui n'est pas liée à useEffect. Cela signifie que les clics sur ce bouton ne déclencheront pas la fonction de nettoyage.

Conclusion

Les fonctions de nettoyage sont largement utilisées dans React, notamment pour signaler des éléments une fois le composant « terminé ». Cependant, soyez prudent lorsque vous liez useEffect à une variable d’état. Comme on le voit dans la démo, cela provoque l'appel de la fonction de nettoyage à chaque fois que la variable d'état est mise à jour, ce qui n'est peut-être pas prévu.

La plupart du temps, la fonction de nettoyage est hébergée dans un useEffect sans aucune variable d'état.

useEffect(() => {
  console.log("Page mounted");

  return () => {
    // cleanup function
    console.log("Page unmounted");
  };
}, [counter]);

C'est bien d'avoir plusieurs hooks useEffect dans un seul composant. Dans ce cas, vous pourriez en avoir un qui réagit à une variable d'état et un autre pour définir la fonction de nettoyage.

Child mounted
Page mounted

Pour répondre à la question, la fonction de nettoyage sera appelée lorsque le composant sera démonté. Cela peut se produire lorsque l'utilisateur accède à une autre section de l'application, ou si useEffect dépend d'une variable d'état, elle sera alors appelée N fois chaque fois que cette variable d'état est 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!