Rendu et Commit
Avant que vos composants ne soient affichés à l'écran, ils doivent être rendus par React. Comprendre les étapes de ce processus vous aidera à réfléchir à la façon dont votre code s'exécute et à expliquer son comportement.
Vous allez apprendre
- Ce que signifie le rendu dans React
- Quand et pourquoi React rend un composant
- Les étapes impliquées dans l'affichage d'un composant à l'écran
- Pourquoi le rendu ne produit pas toujours une mise à jour du DOM
Imaginez que vos composants sont des cuisiniers dans une cuisine, assemblant de délicieux plats à partir d'ingrédients. Dans ce scénario, React est le serveur qui prend les commandes des clients et leur apporte leurs plats. Ce processus de demande et de service de l'interface utilisateur comporte trois étapes :
- Déclenchementd'un rendu (transmission de la commande du client à la cuisine)
- Rendudu composant (préparation de la commande en cuisine)
- Commitdans le DOM (déposer la commande sur la table)
Déclenchement
Rendu
Commit
Illustrations parRachel Lee Nabors
Étape 1 : Déclencher un rendu
Il y a deux raisons pour qu'un composant soit rendu :
- C'est lerendu initial du composant.
- L'état du composant (ou d'un de ses ancêtres) a été mis à jour.
Rendu initial
Lorsque votre application démarre, vous devez déclencher le rendu initial. Les frameworks et les sandboxes masquent parfois ce code, mais il est effectué en appelantcreateRootavec le nœud DOM cible, puis en appelant sa méthoderenderavec votre composant :
Essayez de commenter l'appelroot.render()et voyez le composant disparaître !
Nouveaux rendus lors des mises à jour d'état
Une fois que le composant a été rendu initialement, vous pouvez déclencher d'autres rendus en mettant à jour son état avec lafonction set.La mise à jour de l'état de votre composant met automatiquement en file d'attente un rendu. (Vous pouvez imaginer cela comme un client de restaurant commandant du thé, un dessert et toutes sortes de choses après sa première commande, en fonction de son état de soif ou de faim.)
Mise à jour d'état...
...déclenche...
...un rendu !
Illustrations parRachel Lee Nabors
Étape 2 : React rend vos composants
Après avoir déclenché un rendu, React appelle vos composants pour déterminer ce qui doit être affiché à l'écran.« Rendre » signifie que React appelle vos composants.
- Lors du rendu initial,React appellera le composant racine.
- Pour les rendus suivants,React appellera le composant fonction dont la mise à jour d'état a déclenché le rendu.
Ce processus est récursif : si le composant mis à jour retourne un autre composant, React rendracecomposant ensuite, et si ce composant retourne également quelque chose, il rendracelaensuite, et ainsi de suite. Le processus se poursuivra jusqu'à ce qu'il n'y ait plus de composants imbriqués et que React sache exactement ce qui doit être affiché à l'écran.
In the following example, React will callGallery()andImage()several times:
- Lors du rendu initial,React vacréer les nœuds DOMpour
<section>,<h1>et trois balises<img>. - Lors d'un nouveau rendu,React calculera lesquelles de leurs propriétés, le cas échéant, ont changé depuis le rendu précédent. Il ne fera rien de cette information avant l'étape suivante, la phase de validation.
Piège
Le rendu doit toujours être uncalcul pur:
- Mêmes entrées, même sortie.Pour les mêmes entrées, un composant doit toujours retourner le même JSX. (Quand quelqu'un commande une salade avec des tomates, il ne devrait pas recevoir une salade avec des oignons !)
- Il s'occupe de ses propres affaires.Il ne doit pas modifier d'objets ou de variables qui existaient avant le rendu. (Une commande ne doit pas modifier la commande de quelqu'un d'autre.)
Sinon, vous pouvez rencontrer des bugs déroutants et un comportement imprévisible à mesure que votre base de code gagne en complexité. Lors du développement en "Mode Strict", React appelle la fonction de chaque composant deux fois, ce qui peut aider à mettre en lumière les erreurs causées par des fonctions impures.
Étape 3 : React valide les changements dans le DOM
Après avoir rendu (appelé) vos composants, React va modifier le DOM.
- Pour le rendu initial,React utilisera l'API DOMappendChild()pour placer à l'écran tous les nœuds DOM qu'il a créés.
- Pour les nouveaux rendus,React appliquera les opérations minimales nécessaires (calculées pendant le rendu !) pour que le DOM corresponde à la sortie du dernier rendu.
React ne modifie les nœuds DOM que s'il y a une différence entre les rendus.Par exemple, voici un composant qui est rendu à nouveau avec des props différentes passées par son parent chaque seconde. Notez que vous pouvez ajouter du texte dans l'<input>, en mettant à jour savalue, mais le texte ne disparaît pas lorsque le composant est rendu à nouveau :
Cela fonctionne car lors de cette dernière étape, React ne met à jour que le contenu du<h1>avec la nouvelletime. Il voit que l'<input>apparaît dans le JSX au même endroit que la dernière fois, donc React ne touche pas à l'<input>—ni à savalue!
Épilogue : Peinture du navigateur
Une fois le rendu terminé et que React a mis à jour le DOM, le navigateur repeint l'écran. Bien que ce processus soit connu sous le nom de "rendu du navigateur", nous l'appellerons "peinture" pour éviter toute confusion dans la documentation.
Illustré parRachel Lee Nabors
Récapitulatif
- Toute mise à jour d'écran dans une application React se déroule en trois étapes :
- Déclenchement
- Rendu
- Validation
- Vous pouvez utiliser le Mode Strict pour détecter des erreurs dans vos composants
- React ne touche pas au DOM si le résultat du rendu est identique au précédent