From 6baa29d1005df702c0fe393f2148edb72fb5ffe6 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 23 Oct 2023 16:33:56 +0200 Subject: [PATCH 1/3] copy(ui-as-a-tree): translate up to module deps --- .../learn/understanding-your-ui-as-a-tree.md | 87 +++++++++---------- 1 file changed, 43 insertions(+), 44 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 2a5a24b85..0ad0d3836 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -1,41 +1,41 @@ --- -title: Understanding Your UI as a Tree +title: Votre UI vue comme un arbre --- -Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure? +Votre appli React prend forme, et de nombreux composants sont imbriqués les uns dans les autres. Comment React garde-t-il trace de la structure de composants de votre appli ? -React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components. This understanding will help you debug future concepts like performance and state management. +React, comme de nombreuses autres bibliothèques d'UI, modélise l'UI comme un arbre. Penser à votre appli comme à un arbre s'avère utile pour comprendre les relations entre les composants. Ça vous aidera à déboguer des questions ultérieures telles que l'optimisation des performances ou la gestion d'état. -* How React "sees" component structures -* What a render tree is and what it is useful for -* What a module dependency tree is and what it is useful for +* Comment React « voit » les structures de composants +* Ce qu'est un arbre de rendu, et en quoi il est utile +* Ce qu'est un arbre de dépendances de modules, et à quoi il sert -## Your UI as a tree {/*your-ui-as-a-tree*/} +## Votre UI vue comme un arbre {/*your-ui-as-a-tree*/} -Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. +Les arbres sont un modèle relationnel entre des éléments, et l'UI est souvent représentée au moyen de structures arborescentes. Les navigateurs utilisent par exemple des arbres pour modéliser HTML (le [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) et CSS (le [CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Les plateformes mobiles utilisent aussi des arbres pour représenter leurs hiérarchies de vues. - + -React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. +React crée un arbre de l’UI à partir de vos composants. Dans cet exemple, l’arbre d’UI est utilisé pour produire le DOM. -Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size. +Tout comme les navigateurs et plateformes mobiles, React utilise des structures de données arborescentes pour gérer et modéliser les relations entre les composants dans une appli React. Ces arbres constituent des outils bien utiles pour comprendre la circulation des données au travers d'une appli React, et voir comment en optimiser le rendu et la taille du code. -## The Render Tree {/*the-render-tree*/} +## L'arbre de rendu {/*the-render-tree*/} -A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. +Un aspect fondamental des composants, c'est la composition : la capacité à construire des composants à partir d'autres composants. Lorsque nous [imbriquons des composants](/learn/your-first-component#nesting-and-organizing-components), nous manipulons les concepts de composants parent et enfants, sachant que chaque parent peut lui-même être un enfant d'un autre composant. -When we render a React app, we can model this relationship in a tree, known as the render tree. +Lorsque nous faisons le rendu d'une appli React, nous pouvons modéliser ces relations sous forme d'un arbre, appelé l'arbre de rendu. -Here is a React app that renders inspirational quotes. +Voici une appli React qui affiche des citations inspirantes. @@ -47,7 +47,7 @@ import Copyright from './Copyright'; export default function App() { return ( <> - + @@ -77,9 +77,9 @@ export default function InspirationGenerator({children}) { return ( <> -

Your inspirational quote is:

+

Voici de quoi vous inspirer :

- + {children} ); @@ -94,9 +94,9 @@ export default function Copyright({year}) { ```js quotes.js export default [ - "Don’t let yesterday take up too much of today.” — Will Rogers", - "Ambition is putting a ladder against the sky.", - "A joy that's shared is a joy made double.", + "Ne laisse pas hier occuper trop d’aujourd’hui. — Will Rogers", + "L’ambition, c’est poser une échelle contre le ciel.", + "Une joie partagée compte double.", ]; ``` @@ -118,34 +118,33 @@ export default [ - - -React creates a *render tree*, a UI tree, composed of the rendered components. + +React crée un *arbre de rendu*, un arbre d'UI, constitué des composants dont on a fait le rendu. -From the example app, we can construct the above render tree. +À partir de l'appli d'exemple, nous pouvons construire l'arbre de rendu ci-dessus. -The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. +L'arbre est constitué de nœuds, chacun représentant un composant. `App`, `FancyText`, `Copyright`, pour ne nommer qu'eux, sont tous des nœuds de notre arbre. -The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component. +Le nœud racine dans un arbre de rendu React constitue le [composant racine](/learn/importing-and-exporting-components#the-root-component-file) de l'appli. Dans notre cas, le composant racine est `App`, et c'est le premier composant dont React fera le rendu. Chaque flèche dans l'arbre pointe d'un composant parent vers un composant enfant. -#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/} +#### Où sont les balises HTML dans l'arbre de rendu ? {/*where-are-the-html-elements-in-the-render-tree*/} -You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). +Vous remarquerez que dans l'arbre de rendu ci-dessus, on ne trouve nulle part les balises HTML dont chaque composant fait le rendu. C'est parce que l'arbre de rendu n'est constitué que de [composants](learn/your-first-component#components-ui-building-blocks) React. -React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). +React, en tant que framework d'UI, est indépendant de la plateforme. Sur react.dev, nous mettons en avant des exemples qui font leur rendu sur le web, utilisant du balisage HTML pour leurs primitives d'UI. Mais une appli React pourrait tout aussi bien faire son rendu sur une plateforme mobile ou desktop, et recourir alors à d'autres primitives d'UI telles que [UIView](https://developer.apple.com/documentation/uikit/uiview) ou [FrameworkElement](https://learn.microsoft.com/fr-fr/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). -These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to. +Ces primitives d'UI spécifiques à une plateforme ne font pas partie de React. Les arbres de rendu de React vous renseignent sur votre appli React quelle que soit la plateforme visée par votre appli. -A render tree represents a single render pass of a React application. With [conditional rendering](/learn/conditional-rendering), a parent component may render different children depending on the data passed. +Un arbre de rendu représente une unique passe de rendu d'une application React. Si vous utilisez du [rendu conditionnel](/learn/conditional-rendering), un composant parent pourrait varier les enfants dont il fait le rendu, en fonction des données qu'il reçoit. -We can update the app to conditionally render either an inspirational quote or color. +Nous pouvons mettre à jour l'appli pour qu'elle affiche de façon conditionnelle soit une citation, soit une couleur pour nous inspirer. @@ -157,7 +156,7 @@ import Copyright from './Copyright'; export default function App() { return ( <> - + @@ -194,12 +193,12 @@ export default function InspirationGenerator({children}) { return ( <> -

Your inspirational {inspiration.type} is:

+

Voici votre {inspiration.type === 'quote' ? 'citation' : 'couleur'} inspirante :

{inspiration.type === 'quote' ? : } - + {children} ); @@ -214,11 +213,11 @@ export default function Copyright({year}) { ```js inspirations.js export default [ - {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"}, + {type: 'quote', value: "Ne laisse pas hier occuper trop d’aujourd’hui. — Will Rogers"}, {type: 'color', value: "#B73636"}, - {type: 'quote', value: "Ambition is putting a ladder against the sky."}, + {type: 'quote', value: "L’ambition, c’est poser une échelle contre le ciel."}, {type: 'color', value: "#256266"}, - {type: 'quote', value: "A joy that's shared is a joy made double."}, + {type: 'quote', value: "Une joie partagée compte double."}, {type: 'color', value: "#F9F2B4"}, ]; ``` @@ -245,17 +244,17 @@ export default [ ``` - + -With conditional rendering, across different renders, the render tree may render different components. +Avec le rendu conditionnel, d'un rendu à l'autre, l'arbre de rendu peut différer entre les composants. -In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. +Dans cet exemple, selon la valeur de `inspiration.type`, nous pouvons afficher soit `` soit ``. L'arbre de rendu peut être différent d'une passe de rendu à l'autre. -Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. +Même si les arbres de rendu peuvent varier d'un rendu à l'autre, ces arbres restent utiles pour identifier les composants racine et feuilles d'une appli React. Les composants de haut nivecau sont ceux les plus proches du composant racine, et peuvent impacter la performance de tous les composants en-dessous d'eux. Ce sont souvent eux qui ont la plus forte complexité. Les composants feuilles sont vers le bas de l'arbre, n'ont pas de composants enfants et refont souvent fréquemment leur rendu. -Identifying these categories of components are useful for understanding data flow and performance of your app. +Il est utile de bien identifier ces catégories de composants pour comprendre le flux de données et les performances de votre appli. ## The Module Dependency Tree {/*the-module-dependency-tree*/} From c666f1a21acd010f37b3878e203d59122270d4f3 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 23 Oct 2023 16:49:55 +0200 Subject: [PATCH 2/3] copy(ui-as-a-tree): first full translation --- .../learn/understanding-your-ui-as-a-tree.md | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 0ad0d3836..6eeff15ca 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -256,43 +256,43 @@ Même si les arbres de rendu peuvent varier d'un rendu à l'autre, ces arbres re Il est utile de bien identifier ces catégories de composants pour comprendre le flux de données et les performances de votre appli. -## The Module Dependency Tree {/*the-module-dependency-tree*/} +## L'arbre de dépendances de modules {/*the-module-dependency-tree*/} -Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. +Les arbres peuvent modéliser un autre type de relations dans une appli React : les dépendances entre modules de l'appli. Lorsque nous [découpons nos composants](/learn/importing-and-exporting-components#exporting-and-importing-a-component) et leur logique en fichiers distincts, nou créons des [modules JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) d'où nous pouvons exporter des composants, des fonctions ou encore des constantes. -Each node in a module dependency tree is a module and each branch represents an `import` statement in that module. +Chaque nœud dans un arbre de dépendances de modules représente un module, et chaque branche représente une instruction `import` dans ce module. -If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. +Si nous reprenons l'appli d'Inspirations précédente, nous pouvons construire un arbre de dépendances de modules (ou « arbre de dépendances », pour faire plus court). - + -The module dependency tree for the Inspirations app. +L'arbre de dépendances de modules pour l'appli Inspirations. -The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component. +Le nœud racine de l'arbre constitue le module racine, également appelé point d'entrée. C'est souvent lui qui contient le composant racine. -Comparing to the render tree of the same app, there are similar structures but some notable differences: +Si on compare avec l'arbre de rendu pour la même appli, on trouve des similitudes aussi bien que des différences significatives : -* The nodes that make-up the tree represent modules, not components. -* Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components. -* `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module. +* Les nœuds qui constituent l'arbre représentent des modules, pas des composants. +* Les modules sans composants, tels que `inspirations.js`, sont également visibles dans cet arbre. L'arbre de rendu ne représente que les composants. +* `Copyright.js` apparaît sous `App.js` alors que dans l'arbre de rendu, le composant `Copyright` est un enfant de `InspirationGenerator`. C'est parce qu'`InspirationGenerator` accepte du JSX comme [prop `children`](/learn/passing-props-to-a-component#passing-jsx-as-children), de sorte qu'il fait le rendu du composant enfant `Copyright` sans en importer le module. -Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included. +Les arbres de dépendances sont utiles pour déterminer de quels modules votre appli React a besoin. Lorsque vous faites le *build* d'une appli React en mode production, vous utilisez généralement un outil dédié pour cela. Ce type d'outil est appelé [*bundler*](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), et les *bundlers* se basent sur l'arbre de dépendances pour déterminer quels modules inclure. -As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues. +Au fil de la croissance de votre appli, la taille du *bundle* croît aussi. Les *bundles* massifs sont coûteux à télécharger et à exécuter pour le client. Ils peuvent retarder l'affichage de votre UI. Avoir une bonne perception de l'arbre de dépendances de votre appli peut vous aider à déboguer ce type de problèmes. [comment]: <> (perhaps we should also deep dive on conditional imports) -* Trees are a common way to represent the relationship between entities. They are often used to model UI. -* Render trees represent the nested relationship between React components across a single render. -* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. -* Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance. -* Dependency trees represent the module dependencies in a React app. -* Dependency trees are used by build tools to bundle the necessary code to ship an app. -* Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled. +* Les arbres sont couramment utilisés pour représenter les relations entre des entités. On les utilise notamment pour modéliser les UI. +* Les arbres de rendus représent les relations d'imbrication entre les composants React au sein d'un unique rendu. +* Le recours au rendu conditionnel peut faire varier l'arbre de rendu d'un rendu à l'autre. Selon les valeurs des props reçues, les composants peuvent afficher divers composants enfants. +* Les arbres de rendu aident à repérer les composants racine et feuilles. Les composants situés haut dans l'arbre peuvent impacter la performance de rendu de tous ceux situés en-dessous d'eux, et les composants feuilles refont fréquemment leur rendu. En les identifiant, on facilite la compréhension et le débogage de la performance de rendu. +* Les arbres de dépendances représentent les dépendances entre modules d'une appli React. +* Les arbres de dépendances sont utilisés par les outils de *build* pour inclure le code nécessaire au déploiement d'une appli. +* Les arbres de dépendances aident à comprendre les raisons de bundles massifs, qui ralentissent l'affichage, et à percevoir des opportunités d'optimisation des éléments de code à inclure. From 9a9c9e7a543544ef70e70786457b866779b13ede Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 23 Oct 2023 17:20:32 +0200 Subject: [PATCH 3/3] copy(ui-as-a-tree): final review pass --- src/content/learn/understanding-your-ui-as-a-tree.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 6eeff15ca..31e11aefb 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -31,7 +31,7 @@ Tout comme les navigateurs et plateformes mobiles, React utilise des structures ## L'arbre de rendu {/*the-render-tree*/} -Un aspect fondamental des composants, c'est la composition : la capacité à construire des composants à partir d'autres composants. Lorsque nous [imbriquons des composants](/learn/your-first-component#nesting-and-organizing-components), nous manipulons les concepts de composants parent et enfants, sachant que chaque parent peut lui-même être un enfant d'un autre composant. +Un aspect fondamental des composants, c'est la composition : la capacité à construire des composants à partir d'autres composants. Lorsque nous [imbriquons des composants](/learn/your-first-component#nesting-and-organizing-components), nous manipulons les concepts de composants parents et enfants, sachant que chaque parent peut lui-même être un enfant d'un autre composant. Lorsque nous faisons le rendu d'une appli React, nous pouvons modéliser ces relations sous forme d'un arbre, appelé l'arbre de rendu. @@ -126,7 +126,7 @@ React crée un *arbre de rendu*, un arbre d'UI, constitué des composants dont o À partir de l'appli d'exemple, nous pouvons construire l'arbre de rendu ci-dessus. -L'arbre est constitué de nœuds, chacun représentant un composant. `App`, `FancyText`, `Copyright`, pour ne nommer qu'eux, sont tous des nœuds de notre arbre. +L'arbre est constitué de nœuds, chacun représentant un composant. `App`, `FancyText`, `Copyright`, pour ne citer qu'eux, sont tous des nœuds de notre arbre. Le nœud racine dans un arbre de rendu React constitue le [composant racine](/learn/importing-and-exporting-components#the-root-component-file) de l'appli. Dans notre cas, le composant racine est `App`, et c'est le premier composant dont React fera le rendu. Chaque flèche dans l'arbre pointe d'un composant parent vers un composant enfant. @@ -134,7 +134,7 @@ Le nœud racine dans un arbre de rendu React constitue le [composant racine](/le #### Où sont les balises HTML dans l'arbre de rendu ? {/*where-are-the-html-elements-in-the-render-tree*/} -Vous remarquerez que dans l'arbre de rendu ci-dessus, on ne trouve nulle part les balises HTML dont chaque composant fait le rendu. C'est parce que l'arbre de rendu n'est constitué que de [composants](learn/your-first-component#components-ui-building-blocks) React. +Vous remarquerez que dans l'arbre de rendu ci-dessus, on ne trouve nulle part les balises HTML utilisées par les composants. C'est parce que l'arbre de rendu est constitué uniquement par les [composants](learn/your-first-component#components-ui-building-blocks) React. React, en tant que framework d'UI, est indépendant de la plateforme. Sur react.dev, nous mettons en avant des exemples qui font leur rendu sur le web, utilisant du balisage HTML pour leurs primitives d'UI. Mais une appli React pourrait tout aussi bien faire son rendu sur une plateforme mobile ou desktop, et recourir alors à d'autres primitives d'UI telles que [UIView](https://developer.apple.com/documentation/uikit/uiview) ou [FrameworkElement](https://learn.microsoft.com/fr-fr/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). @@ -142,7 +142,7 @@ Ces primitives d'UI spécifiques à une plateforme ne font pas partie de React. -Un arbre de rendu représente une unique passe de rendu d'une application React. Si vous utilisez du [rendu conditionnel](/learn/conditional-rendering), un composant parent pourrait varier les enfants dont il fait le rendu, en fonction des données qu'il reçoit. +Un arbre de rendu représente une unique passe de rendu d'une application React. Si vous utilisez du [rendu conditionnel](/learn/conditional-rendering), un composant parent pourrait modifier les enfants qu'il utilise, selon les données qu'il reçoit. Nous pouvons mettre à jour l'appli pour qu'elle affiche de façon conditionnelle soit une citation, soit une couleur pour nous inspirer. @@ -252,7 +252,7 @@ Avec le rendu conditionnel, d'un rendu à l'autre, l'arbre de rendu peut différ Dans cet exemple, selon la valeur de `inspiration.type`, nous pouvons afficher soit `` soit ``. L'arbre de rendu peut être différent d'une passe de rendu à l'autre. -Même si les arbres de rendu peuvent varier d'un rendu à l'autre, ces arbres restent utiles pour identifier les composants racine et feuilles d'une appli React. Les composants de haut nivecau sont ceux les plus proches du composant racine, et peuvent impacter la performance de tous les composants en-dessous d'eux. Ce sont souvent eux qui ont la plus forte complexité. Les composants feuilles sont vers le bas de l'arbre, n'ont pas de composants enfants et refont souvent fréquemment leur rendu. +Même si les arbres de rendu peuvent varier d'un rendu à l'autre, ces arbres restent utiles pour identifier les composants racine et feuilles d'une appli React. Les composants de haut niveau sont ceux les plus proches du composant racine, et peuvent impacter la performance de tous les composants en-dessous d'eux. Ce sont souvent eux qui ont la plus forte complexité. Les composants feuilles sont vers le bas de l'arbre, n'ont pas de composants enfants et refont fréquemment leur rendu. Il est utile de bien identifier ces catégories de composants pour comprendre le flux de données et les performances de votre appli. @@ -287,7 +287,7 @@ Au fil de la croissance de votre appli, la taille du *bundle* croît aussi. Les * Les arbres sont couramment utilisés pour représenter les relations entre des entités. On les utilise notamment pour modéliser les UI. -* Les arbres de rendus représent les relations d'imbrication entre les composants React au sein d'un unique rendu. +* Les arbres de rendu représent les imbrications entre les composants React au sein d'un unique rendu. * Le recours au rendu conditionnel peut faire varier l'arbre de rendu d'un rendu à l'autre. Selon les valeurs des props reçues, les composants peuvent afficher divers composants enfants. * Les arbres de rendu aident à repérer les composants racine et feuilles. Les composants situés haut dans l'arbre peuvent impacter la performance de rendu de tous ceux situés en-dessous d'eux, et les composants feuilles refont fréquemment leur rendu. En les identifiant, on facilite la compréhension et le débogage de la performance de rendu. * Les arbres de dépendances représentent les dépendances entre modules d'une appli React.