v19.2Latest

Comprendre votre interface utilisateur comme un arbre

Votre application React prend forme avec de nombreux composants imbriqués les uns dans les autres. Comment React suit-il la structure de composants de votre application ?

React, et de nombreuses autres bibliothèques d'interface utilisateur, modélisent l'interface utilisateur comme un arbre. Penser votre application comme un arbre est utile pour comprendre la relation entre les composants. Cette compréhension vous aidera à déboguer des concepts futurs comme les performances et la gestion de l'état.

Vous allez apprendre
  • Comment React « voit » les structures de composants
  • Ce qu'est un arbre de rendu et à quoi il sert
  • Ce qu'est un arbre de dépendances de modules et à quoi il sert

Votre interface utilisateur comme un arbre

Les arbres sont un modèle de relation entre des éléments. L'interface utilisateur est souvent représentée à l'aide de structures arborescentes. Par exemple, les navigateurs utilisent des structures arborescentes pour modéliser le HTML (DOM) et le CSS (CSSOM). Les plateformes mobiles utilisent également des arbres pour représenter leur hiérarchie de vues.

Diagramme avec trois sections disposées horizontalement. Dans la première section, trois rectangles sont empilés verticalement, avec les étiquettes 'Composant A', 'Composant B' et 'Composant C'. La transition vers le panneau suivant est une flèche avec le logo React en haut étiquetée 'React'. La section du milieu contient un arbre de composants, avec la racine étiquetée 'A' et deux enfants étiquetés 'B' et 'C'. La section suivante est à nouveau atteinte via une flèche avec le logo React en haut étiquetée 'React DOM'. La troisième et dernière section est un wireframe d'un navigateur, contenant un arbre de 8 nœuds, dont seul un sous-ensemble est mis en évidence (indiquant le sous-arbre de la section du milieu).Diagramme avec trois sections disposées horizontalement. Dans la première section, trois rectangles sont empilés verticalement, avec les étiquettes 'Composant A', 'Composant B' et 'Composant C'. La transition vers le panneau suivant est une flèche avec le logo React en haut étiquetée 'React'. La section du milieu contient un arbre de composants, avec la racine étiquetée 'A' et deux enfants étiquetés 'B' et 'C'. La section suivante est à nouveau atteinte via une flèche avec le logo React en haut étiquetée 'React DOM'. La troisième et dernière section est un wireframe d'un navigateur, contenant un arbre de 8 nœuds, dont seul un sous-ensemble est mis en évidence (indiquant le sous-arbre de la section du milieu).

React crée un arbre d'interface utilisateur à partir de vos composants. Dans cet exemple, l'arbre d'interface utilisateur est ensuite utilisé pour effectuer le rendu dans le DOM.

Comme les navigateurs et les plateformes mobiles, React utilise également des structures arborescentes pour gérer et modéliser la relation entre les composants d'une application React. Ces arbres sont des outils utiles pour comprendre comment les données circulent dans une application React et comment optimiser le rendu et la taille de l'application.

L'arbre de rendu

Une caractéristique majeure des composants est la capacité de composer des composants à partir d'autres composants. Lorsque nousimbriquons des composants, nous avons le concept de composants parent et enfant, où chaque composant parent peut lui-même être un enfant d'un autre composant.

Lorsque nous rendons une application React, nous pouvons modéliser cette relation dans un arbre, appelé l'arbre de rendu.

Voici une application React qui affiche des citations inspirantes.

Graphe en arbre avec cinq nœuds. Chaque nœud représente un composant. La racine de l'arbre est App, avec deux flèches qui en partent vers 'InspirationGenerator' et 'FancyText'. Les flèches sont étiquetées avec le mot 'renders'. Le nœud 'InspirationGenerator' a également deux flèches pointant vers les nœuds 'FancyText' et 'Copyright'.Graphe en arbre avec cinq nœuds. Chaque nœud représente un composant. La racine de l'arbre est App, avec deux flèches qui en partent vers 'InspirationGenerator' et 'FancyText'. Les flèches sont étiquetées avec le mot 'renders'. Le nœud 'InspirationGenerator' a également deux flèches pointant vers les nœuds 'FancyText' et 'Copyright'.

React crée unarbre de rendu, un arbre d'interface utilisateur, composé des composants rendus.

À partir de l'exemple d'application, nous pouvons construire l'arbre de rendu ci-dessus.

L'arbre est composé de nœuds, chacun représentant un composant.App,FancyText,Copyright, pour n'en citer que quelques-uns, sont tous des nœuds de notre arbre.

Le nœud racine dans un arbre de rendu React est lecomposant racinede l'application. Dans ce cas, le composant racine estAppet c'est le premier composant que React rend. Chaque flèche dans l'arbre pointe d'un composant parent vers un composant enfant.

Deep Dive
Où sont les balises HTML dans l'arbre de rendu ?

Un arbre de rendu représente une seule passe de rendu d'une application React. Avec lerendu conditionnel, un composant parent peut afficher des enfants différents selon les données transmises.

Nous pouvons mettre à jour l'application pour afficher conditionnellement soit une citation inspirante, soit une couleur.

Graphique en arbre avec six nœuds. Le nœud supérieur de l'arbre est étiqueté 'App' avec deux flèches pointant vers les nœuds étiquetés 'InspirationGenerator' et 'FancyText'. Les flèches sont des lignes pleines et sont étiquetées avec le mot 'renders'. Le nœud 'InspirationGenerator' a également trois flèches. Les flèches vers les nœuds 'FancyText' et 'Color' sont en pointillés et étiquetées 'renders?'. La dernière flèche pointe vers le nœud étiqueté 'Copyright' et est pleine et étiquetée 'renders'.Graphique en arbre avec six nœuds. Le nœud supérieur de l'arbre est étiqueté 'App' avec deux flèches pointant vers les nœuds étiquetés 'InspirationGenerator' et 'FancyText'. Les flèches sont des lignes pleines et sont étiquetées avec le mot 'renders'. Le nœud 'InspirationGenerator' a également trois flèches. Les flèches vers les nœuds 'FancyText' et 'Color' sont en pointillés et étiquetées 'renders?'. La dernière flèche pointe vers le nœud étiqueté 'Copyright' et est pleine et étiquetée 'renders'.

Avec le rendu conditionnel, selon les rendus, l'arbre de rendu peut afficher des composants différents.

Dans cet exemple, selon ce qu'estinspiration.type, nous pouvons afficher<FancyText>ou<Color>. L'arbre de rendu peut être différent pour chaque passe de rendu.

Bien que les arbres de rendu puissent différer d'une passe de rendu à l'autre, ces arbres sont généralement utiles pour identifier quels sont les composantsde plus haut niveauet lescomposants feuillesdans une application React. Les composants de plus haut niveau sont les composants les plus proches du composant racine et affectent les performances de rendu de tous les composants situés en dessous d'eux ; ils contiennent souvent la plus grande complexité. Les composants feuilles sont près du bas de l'arbre, n'ont pas de composants enfants et sont souvent fréquemment re-rendus.

Identifier ces catégories de composants est utile pour comprendre le flux de données et les performances de votre application.

L'arbre de dépendances des modules

Une autre relation dans une application React qui peut être modélisée par un arbre est celle des dépendances des modules. Lorsque nousdécomposons nos composantset notre logique en fichiers séparés, nous créons desmodules JSoù nous pouvons exporter des composants, des fonctions ou des constantes.

Chaque nœud dans un arbre de dépendances des modules est un module et chaque branche représente une instructionimportdans ce module.

Si nous prenons l'application Inspirations précédente, nous pouvons construire un arbre de dépendances des modules, ou arbre de dépendances pour faire court.

Un graphique en arbre avec sept nœuds. Chaque nœud est étiqueté avec un nom de module. Le nœud de plus haut niveau de l'arbre est étiqueté 'App.js'. Trois flèches pointent vers les modules 'InspirationGenerator.js', 'FancyText.js' et 'Copyright.js' et les flèches sont étiquetées 'imports'. Depuis le nœud 'InspirationGenerator.js', trois flèches s'étendent vers trois modules : 'FancyText.js', 'Color.js', et 'inspirations.js'. Les flèches sont étiquetées 'imports'.Un graphique en arbre avec sept nœuds. Chaque nœud est étiqueté avec un nom de module. Le nœud de plus haut niveau de l'arbre est étiqueté 'App.js'. Trois flèches pointent vers les modules 'InspirationGenerator.js', 'FancyText.js' et 'Copyright.js' et les flèches sont étiquetées 'imports'. Depuis le nœud 'InspirationGenerator.js', trois flèches s'étendent vers trois modules : 'FancyText.js', 'Color.js', et 'inspirations.js'. Les flèches sont étiquetées 'imports'.

L'arbre de dépendance des modules pour l'application Inspirations.

Le nœud racine de l'arbre est le module racine, également appelé le fichier d'entrée. Il s'agit souvent du module qui contient le composant racine.

En comparaison avec l'arbre de rendu de la même application, on retrouve des structures similaires mais avec quelques différences notables :

  • Les nœuds qui composent l'arbre représentent des modules, et non des composants.
  • Les modules qui ne sont pas des composants, commeinspirations.js, sont également représentés dans cet arbre. L'arbre de rendu n'encapsule que les composants.
  • Copyright.jsapparaît sousApp.jsmais dans l'arbre de rendu,Copyright, le composant, apparaît comme un enfant deInspirationGenerator. Cela est dû au fait queInspirationGeneratoraccepte du JSX commeprops enfants, donc il rendCopyrightcomme un composant enfant mais n'importe pas le module.

Les arbres de dépendance sont utiles pour déterminer quels modules sont nécessaires pour exécuter votre application React. Lors de la construction d'une application React pour la production, il y a généralement une étape de build qui regroupera tout le JavaScript nécessaire pour l'envoyer au client. L'outil responsable de cela s'appelle unbundler, et les bundlers utiliseront l'arbre de dépendance pour déterminer quels modules doivent être inclus.

À mesure que votre application grandit, la taille du bundle augmente souvent aussi. Les bundles de grande taille sont coûteux à télécharger et à exécuter pour un client. Les bundles de grande taille peuvent retarder le moment où votre interface utilisateur est dessinée. Avoir une idée de l'arbre de dépendance de votre application peut aider à déboguer ces problèmes.

Récapitulatif

  • Les arbres sont une manière courante de représenter la relation entre des entités. Ils sont souvent utilisés pour modéliser l'interface utilisateur.
  • Les arbres de rendu représentent la relation d'imbrication entre les composants React lors d'un rendu unique.
  • Avec le rendu conditionnel, l'arbre de rendu peut changer d'un rendu à l'autre. Avec différentes valeurs de props, les composants peuvent rendre différents composants enfants.
  • Les arbres de rendu aident à identifier quels sont les composants de plus haut niveau et les composants feuilles. Les composants de plus haut niveau affectent les performances de rendu de tous les composants en dessous d'eux et les composants feuilles sont souvent re-rendus fréquemment. Les identifier est utile pour comprendre et déboguer les performances de rendu.
  • Les arbres de dépendance représentent les dépendances entre modules dans une application React.
  • Les arbres de dépendance sont utilisés par les outils de build pour regrouper le code nécessaire à l'envoi d'une application.
  • Les arbres de dépendance sont utiles pour déboguer les bundles de grande taille qui ralentissent le temps d'affichage et révèlent des opportunités d'optimisation du code regroupé.
上一篇Maintenir les composants purs下一篇Ajouter de l'interactivité