v19.2Latest

Ihre Benutzeroberfläche als Baum verstehen

Ihre React-App nimmt Gestalt an, wobei viele Komponenten ineinander verschachtelt sind. Wie behält React die Komponentenstruktur Ihrer App im Blick?

React und viele andere UI-Bibliotheken modellieren die Benutzeroberfläche als Baum. Ihre App als Baum zu betrachten, ist nützlich, um die Beziehungen zwischen Komponenten zu verstehen. Dieses Verständnis wird Ihnen helfen, zukünftige Konzepte wie Performance und State-Management zu debuggen.

Sie werden lernen
  • Wie React Komponentenstrukturen "sieht"
  • Was ein Render-Baum ist und wofür er nützlich ist
  • Was ein Modulabhängigkeitsbaum ist und wofür er nützlich ist

Ihre Benutzeroberfläche als Baum

Bäume sind ein Beziehungsmodell zwischen Elementen. Die Benutzeroberfläche wird oft mithilfe von Baumstrukturen dargestellt. Beispielsweise verwenden Browser Baumstrukturen, um HTML (DOM) und CSS (CSSOM) zu modellieren. Auch mobile Plattformen verwenden Bäume, um ihre Ansichtshierarchie darzustellen.

Diagramm mit drei horizontal angeordneten Abschnitten. Im ersten Abschnitt sind drei vertikal gestapelte Rechtecke mit den Beschriftungen 'Component A', 'Component B' und 'Component C'. Der Übergang zum nächsten Bereich ist ein Pfeil mit dem React-Logo oben, beschriftet mit 'React'. Der mittlere Abschnitt enthält einen Baum von Komponenten, mit der Wurzel 'A' und zwei Kindern 'B' und 'C'. Der nächste Abschnitt wird wiederum mit einem Pfeil mit dem React-Logo oben, beschriftet mit 'React DOM', erreicht. Der dritte und letzte Abschnitt ist ein Drahtgittermodell eines Browsers, das einen Baum mit 8 Knoten enthält, von dem nur ein Teil hervorgehoben ist (was den Teilbaum aus dem mittleren Abschnitt anzeigt).Diagramm mit drei horizontal angeordneten Abschnitten. Im ersten Abschnitt sind drei vertikal gestapelte Rechtecke mit den Beschriftungen 'Component A', 'Component B' und 'Component C'. Der Übergang zum nächsten Bereich ist ein Pfeil mit dem React-Logo oben, beschriftet mit 'React'. Der mittlere Abschnitt enthält einen Baum von Komponenten, mit der Wurzel 'A' und zwei Kindern 'B' und 'C'. Der nächste Abschnitt wird wiederum mit einem Pfeil mit dem React-Logo oben, beschriftet mit 'React DOM', erreicht. Der dritte und letzte Abschnitt ist ein Drahtgittermodell eines Browsers, das einen Baum mit 8 Knoten enthält, von dem nur ein Teil hervorgehoben ist (was den Teilbaum aus dem mittleren Abschnitt anzeigt).

React erstellt einen UI-Baum aus Ihren Komponenten. In diesem Beispiel wird der UI-Baum dann verwendet, um im DOM zu rendern.

Ähnlich wie Browser und mobile Plattformen verwendet auch React Baumstrukturen, um die Beziehungen zwischen Komponenten in einer React-App zu verwalten und zu modellieren. Diese Bäume sind nützliche Werkzeuge, um zu verstehen, wie Daten durch eine React-App fließen und wie das Rendering und die App-Größe optimiert werden können.

Der Render-Baum

Eine Hauptfunktion von Komponenten ist die Fähigkeit, Komponenten aus anderen Komponenten zusammenzusetzen. Wenn wirKomponenten verschachteln, haben wir das Konzept von Eltern- und Kindkomponenten, wobei jede Elternkomponente selbst ein Kind einer anderen Komponente sein kann.

Wenn wir eine React-App rendern, können wir diese Beziehung in einem Baum modellieren, der als Render-Baum bekannt ist.

Hier ist eine React-App, die inspirierende Zitate rendert.

Baumdiagramm mit fünf Knoten. Jeder Knoten repräsentiert eine Komponente. Die Wurzel des Baums ist App, von der zwei Pfeile zu 'InspirationGenerator' und 'FancyText' ausgehen. Die Pfeile sind mit dem Wort 'rendert' beschriftet. Der Knoten 'InspirationGenerator' hat ebenfalls zwei Pfeile, die auf die Knoten 'FancyText' und 'Copyright' zeigen.Baumdiagramm mit fünf Knoten. Jeder Knoten repräsentiert eine Komponente. Die Wurzel des Baums ist App, von der zwei Pfeile zu 'InspirationGenerator' und 'FancyText' ausgehen. Die Pfeile sind mit dem Wort 'rendert' beschriftet. Der Knoten 'InspirationGenerator' hat ebenfalls zwei Pfeile, die auf die Knoten 'FancyText' und 'Copyright' zeigen.

React erstellt einenRender-Baum, einen UI-Baum, der aus den gerenderten Komponenten besteht.

Aus der Beispiel-App können wir den obigen Render-Baum konstruieren.

Der Baum besteht aus Knoten, von denen jeder eine Komponente repräsentiert.App,FancyText,Copyright, um einige zu nennen, sind alle Knoten in unserem Baum.

Der Wurzelknoten in einem React-Render-Baum ist dieWurzelkomponenteder App. In diesem Fall ist die WurzelkomponenteAppund sie ist die erste Komponente, die React rendert. Jeder Pfeil im Baum zeigt von einer Elternkomponente zu einer Kindkomponente.

Deep Dive
Wo sind die HTML-Tags im Render-Baum?

Ein Render-Baum repräsentiert einen einzelnen Render-Durchlauf einer React-Anwendung. Mitbedingtem Renderingkann eine Elternkomponente je nach übergebenen Daten unterschiedliche Kindkomponenten rendern.

Wir können die App so aktualisieren, dass sie entweder ein inspirierendes Zitat oder eine Farbe bedingt rendert.

Baumdiagramm mit sechs Knoten. Der oberste Knoten des Baums ist mit 'App' beschriftet, mit zwei Pfeilen, die zu Knoten mit den Beschriftungen 'InspirationGenerator' und 'FancyText' führen. Die Pfeile sind durchgezogene Linien und mit dem Wort 'rendert' beschriftet. Der 'InspirationGenerator'-Knoten hat auch drei Pfeile. Die Pfeile zu den Knoten 'FancyText' und 'Color' sind gestrichelt und mit 'rendert?' beschriftet. Der letzte Pfeil zeigt auf den Knoten 'Copyright', ist durchgezogen und mit 'rendert' beschriftet.Baumdiagramm mit sechs Knoten. Der oberste Knoten des Baums ist mit 'App' beschriftet, mit zwei Pfeilen, die zu Knoten mit den Beschriftungen 'InspirationGenerator' und 'FancyText' führen. Die Pfeile sind durchgezogene Linien und mit dem Wort 'rendert' beschriftet. Der 'InspirationGenerator'-Knoten hat auch drei Pfeile. Die Pfeile zu den Knoten 'FancyText' und 'Color' sind gestrichelt und mit 'rendert?' beschriftet. Der letzte Pfeil zeigt auf den Knoten 'Copyright', ist durchgezogen und mit 'rendert' beschriftet.

Bei bedingtem Rendering kann der Render-Baum über verschiedene Render-Durchläufe hinweg unterschiedliche Komponenten rendern.

In diesem Beispiel rendern wir je nachdem, wasinspiration.typeist, entweder<FancyText>oder<Color>. Der Render-Baum kann für jeden Render-Durchlauf unterschiedlich sein.

Obwohl sich Render-Bäume über verschiedene Render-Durchläufe hinweg unterscheiden können, sind diese Bäume im Allgemeinen hilfreich, um zu identifizieren, was dieTop-Level-undLeaf-Komponentenin einer React-App sind. Top-Level-Komponenten sind die Komponenten, die der Root-Komponente am nächsten sind, und beeinflussen die Rendering-Leistung aller darunterliegenden Komponenten und enthalten oft die größte Komplexität. Leaf-Komponenten befinden sich nahe am unteren Ende des Baums, haben keine Kindkomponenten und werden oft häufig neu gerendert.

Das Identifizieren dieser Komponentenkategorien ist nützlich, um den Datenfluss und die Leistung Ihrer App zu verstehen.

Der Modulabhängigkeitsbaum

Eine weitere Beziehung in einer React-App, die mit einem Baum modelliert werden kann, sind die Modulabhängigkeiten einer App. Wenn wirunsere Komponenten und Logik in separate Dateien aufteilen, erstellen wirJS-Module, in denen wir Komponenten, Funktionen oder Konstanten exportieren können.

Jeder Knoten in einem Modulabhängigkeitsbaum ist ein Modul und jeder Zweig repräsentiert eineimport-Anweisung in diesem Modul.

Wenn wir die vorherige Inspirations-App nehmen, können wir einen Modulabhängigkeitsbaum oder kurz einen Abhängigkeitsbaum erstellen.

Ein Baumdiagramm mit sieben Knoten. Jeder Knoten ist mit einem Modulnamen beschriftet. Der oberste Knoten des Baums ist mit 'App.js' beschriftet. Drei Pfeile zeigen auf die Module 'InspirationGenerator.js', 'FancyText.js' und 'Copyright.js' und die Pfeile sind mit 'imports' beschriftet. Vom 'InspirationGenerator.js'-Knoten gehen drei Pfeile zu drei Modulen: 'FancyText.js', 'Color.js' und 'inspirations.js'. Die Pfeile sind mit 'imports' beschriftet.Ein Baumdiagramm mit sieben Knoten. Jeder Knoten ist mit einem Modulnamen beschriftet. Der oberste Knoten des Baums ist mit 'App.js' beschriftet. Drei Pfeile zeigen auf die Module 'InspirationGenerator.js', 'FancyText.js' und 'Copyright.js' und die Pfeile sind mit 'imports' beschriftet. Vom 'InspirationGenerator.js'-Knoten gehen drei Pfeile zu drei Modulen: 'FancyText.js', 'Color.js' und 'inspirations.js'. Die Pfeile sind mit 'imports' beschriftet.

Der Modulabhängigkeitsbaum für die Inspirations-App.

Der Wurzelknoten des Baums ist das Wurzelmodul, auch bekannt als die Einstiegsdatei. Es ist oft das Modul, das die Root-Komponente enthält.

Im Vergleich zum Render-Baum derselben App gibt es ähnliche Strukturen, aber einige bemerkenswerte Unterschiede:

  • Die Knoten, die den Baum bilden, repräsentieren Module, nicht Komponenten.
  • Nicht-Komponenten-Module, wieinspirations.js, sind ebenfalls in diesem Baum dargestellt. Der Render-Baum umfasst nur Komponenten.
  • Copyright.jserscheint unterApp.js, aber im Render-Baum erscheintCopyright, die Komponente, als Kind vonInspirationGenerator. Das liegt daran, dassInspirationGeneratorJSX alsChildren-Propsakzeptiert, alsoCopyrightals Kindkomponente rendert, aber das Modul nicht importiert.

Abhängigkeitsbäume sind nützlich, um zu bestimmen, welche Module zum Ausführen Ihrer React-App erforderlich sind. Beim Erstellen einer React-App für die Produktion gibt es typischerweise einen Build-Schritt, der den gesamten erforderlichen JavaScript-Code für den Versand an den Client bündelt. Das dafür verantwortliche Tool wird alsBundlerbezeichnet, und Bundler verwenden den Abhängigkeitsbaum, um zu bestimmen, welche Module eingeschlossen werden sollten.

Wenn Ihre App wächst, wächst oft auch die Bundle-Größe. Große Bundle-Größen sind für einen Client teuer im Herunterladen und Ausführen. Große Bundle-Größen können die Zeit verzögern, bis Ihre Benutzeroberfläche gezeichnet wird. Ein Gefühl für den Abhängigkeitsbaum Ihrer App zu bekommen, kann bei der Fehlerbehebung dieser Probleme helfen.

Zusammenfassung

  • Bäume sind eine gängige Methode, um die Beziehung zwischen Entitäten darzustellen. Sie werden oft verwendet, um Benutzeroberflächen zu modellieren.
  • Render-Bäume stellen die verschachtelte Beziehung zwischen React-Komponenten während eines einzelnen Renders dar.
  • Bei bedingtem Rendering kann sich der Render-Baum bei verschiedenen Renders ändern. Mit unterschiedlichen Prop-Werten können Komponenten unterschiedliche Kindkomponenten rendern.
  • Render-Bäume helfen dabei, die Top-Level- und Leaf-Komponenten zu identifizieren. Top-Level-Komponenten beeinflussen die Rendering-Leistung aller darunter liegenden Komponenten, und Leaf-Komponenten werden oft häufig neu gerendert. Ihre Identifizierung ist nützlich, um die Rendering-Leistung zu verstehen und zu debuggen.
  • Abhängigkeitsbäume stellen die Modulabhängigkeiten in einer React-App dar.
  • Abhängigkeitsbäume werden von Build-Tools verwendet, um den notwendigen Code für den Versand einer App zu bündeln.
  • Abhängigkeitsbäume sind nützlich, um große Bundle-Größen zu debuggen, die die Zeit bis zum Zeichnen verlangsamen, und um Möglichkeiten zur Optimierung des gebündelten Codes aufzuzeigen.
上一篇Komponenten rein halten下一篇Interaktivität hinzufügen