Cycle de vie de React en minutes

Maîtriser le cycle de vie de React est la première étape pour déboguer comme un pro ?.

Voici un guide simple de 3 minutes pour vous aider à comprendre comment tout fonctionne.

? Téléchargez mon livre GRATUIT de 101 trucs et astuces React pour prendre une longueur d'avance.

Quel est le cycle de vie des composants React ?

Un composant React est comme un être humain ?.

Tout comme nous naissons, évoluons et finissons par mourir, les composants React suivent un cycle de vie : ils né, ils mis à jour, puis ils mourent.

Ce processus est connu sous le nom de cycle de vie des composants, qui comporte trois phases principales :

• Montage (aka Birth) : React crée le composant et l'ajoute au DOM.

• Mise à jour (alias Évolution) : le composant change en réponse aux changements d'état.

• Démontage (alias Dying) : React supprime le composant et nettoie les ressources.

Chaque phase comprend des étapes spécifiques que React effectue pour optimiser le rendu et gérer les ressources.

Analogie du cycle de vie des composants de réaction avec le cycle de vie humain

Pourquoi avez-vous besoin de comprendre le cycle de vie des composants React ?

Comprendre le cycle de vie de React vous aide :

• Écrivez de meilleurs effets avec useEffect et useLayoutEffect.

• Évitez les inefficacités, comme définir l'état dans useEffect.

• Empêchez les fuites de mémoire en nettoyant.

• Optimisez les performances et évitez les nouveaux rendus inutiles.

Les trois phases du cycle de vie des composants React

Chronologie d'un composant React avec des hooks. Source : https://julesblom.com/writing/react-hook-component-timeline

1. Montage : lors du premier rendu d'un composant

Le montage se produit lorsque React ajoute (monte) un composant à l'écran.

Qu'est-ce qui déclenche le montage ?

• Lorsque vous appelez root.render()

• Lorsque React ajoute un composant à l'arborescence JSX et restitue son parent pour inclure le nouveau composant.

Que se passe-t-il lors du montage ?

1. Render : React appelle la fonction de composant (ou la méthode de rendu dans les composants de classe) pour créer des éléments React. React initialise également les hooks.

2. Insérer des nœuds DOM : React met à jour le vrai DOM avec les nouveaux éléments. Cette étape se produit pendant la phase de validation lorsque React applique les modifications au DOM.

3. Définir les références DOM : Si vous utilisez useRef, React définit les références aux nœuds DOM.

4. Exécutez useLayoutEffect : React exécute les fonctions useLayoutEffect. Les modifications apportées ici ne provoqueront pas de scintillement visible puisque le changement se produira avant que l'utilisateur ne voie les changements visuels (qui se produisent pendant la peinture).

5. DOM Paint : Le navigateur peint l'interface utilisateur mise à jour.

6. Exécutez useEffect : Enfin, React exécute les fonctions useEffect.

---

2. Mise à jour : lorsqu'un composant est restitué

La mise à jour se produit lorsque React restitue un composant pour refléter les modifications.

Qu'est-ce qui déclenche la mise à jour ?

• Une mise à jour de l'état

• Une valeur de contexte mise à jour

• Re-rendu d'un composant parent (si le composant n'a pas été mémorisé)

• Etc.

Que se passe-t-il lors de la mise à jour ?

1. Re-rendu : React recalcule la sortie du composant.

2. Réconciliation : React compare le nouvel arbre React avec le précédent pour déterminer les changements.

3. Commettre les modifications : React met à jour le DOM avec les modifications.

4. Définir les références DOM : React annule ref.current et appelle des rappels non stables ref avec null si le nœud DOM référencé est supprimé ou remplacé pendant la mise à jour.

5. Nettoyage useLayoutEffect : React exécute les fonctions de nettoyage du useLayoutEffect précédent.

6. Définir les références DOM : React définit de nouvelles valeurs de référence pour les éléments DOM mis à jour (comme dans la phase de montage).

7. Exécutez useLayoutEffect : React appelle les hooks useLayoutEffect, comme en phase de montage (si ses dépendances ont changé selon Object.is).

8. Peignez le DOM : Le navigateur met à jour l'interface utilisateur pour refléter les modifications.

9. Nettoyage useEffect : Fonctions de nettoyage de l'exécution précédente de useEffect pour éviter les fuites de mémoire.

10. Exécutez useEffect : React exécute la fonction useEffect mise à jour (si ses dépendances ont changé selon Object.is).

    ---

3. Démontage : lorsque React supprime un composant

Le démontage se produit lorsque React supprime un composant du DOM, libérant ainsi des ressources.

Qu'est-ce qui déclenche le démontage ?

• Le composant ne fait plus partie de l'arborescence JSX

• React démonte son parent.

• La clé du composant a changé (React démontera l'ancienne instance et en montera une nouvelle.).

• Etc.

Que se passe-t-il lors du démontage ?

• Exécuter les fonctions de nettoyage : React exécute les fonctions de nettoyage définies dans useEffect et useLayoutEffect.

• Définir les références DOM : React annule ref.current et appelle les rappels de référence avec null.

• Supprimer les nœuds DOM : React supprime les nœuds DOM associés à l'élément.

Ressources complémentaires pour aller plus loin

Si vous souhaitez approfondir le cycle de vie de React, je vous recommande ces ressources étonnantes :

• Réagir aux documents

  • Rendu et validation
  • Cycle de vie des effets réactifs

• Chronologie d'un composant React avec des hooks ❤️

• Pourquoi React Re-Renders

• Un guide (pour l'essentiel) complet sur le comportement de rendu de React - avertissement : il s'agit d'un article très long ?

Résumé

Une fois que vous aurez compris le cycle de vie des composants React, vous serez en avance sur 99 % des développeurs frontend juniors.

C'est plus simple que vous ne le pensez : seulement trois phases — montage, mise à jour et démontage.

Commencez à mettre en pratique ces concepts avec des exemples concrets :

• Utilisez useLayoutEffect pour les mesures DOM.

• Toujours nettoyer les effets lorsqu'un composant se démonte.

Vous avez ça ?.

? REPÉRER LE BUG

? MATIÈRE À RÉFLÉCHIR

C'est fini ?.

Laisser un commentaire ? pour partager ce que vous retenez le plus.

Et n'oubliez pas de laisser un "???". Si vous apprenez React, téléchargez mon livre 101 trucs et astuces React

GRATUIT

. Si vous aimez les articles comme celui-ci, rejoignez ma newsletter GRATUIT,

FrontendJoy

.

Si vous voulez des conseils au quotidien, retrouvez-moi sur X/Twitter ou sur Bluesky. <script> // Detect dark theme var iframe = document.getElementById('tweet-1872251057281372270-743'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872251057281372270&theme=dark" } </script> <script> // Detect dark theme var iframe = document.getElementById('tweet-1872190627729084724-61'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1872190627729084724&theme=dark" } </script>

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!