Rendern und Commit
Bevor deine Komponenten auf dem Bildschirm angezeigt werden, müssen sie von React gerendert werden. Wenn du die Schritte dieses Prozesses verstehst, kannst du besser nachvollziehen, wie dein Code ausgeführt wird, und sein Verhalten erklären.
Du wirst lernen
- Was Rendering in React bedeutet
- Wann und warum React eine Komponente rendert
- Die Schritte, die zur Anzeige einer Komponente auf dem Bildschirm erforderlich sind
- Warum Rendering nicht immer ein DOM-Update erzeugt
Stell dir vor, deine Komponenten sind Köche in einer Küche, die aus Zutaten leckere Gerichte zusammenstellen. In diesem Szenario ist React der Kellner, der Bestellungen der Gäste entgegennimmt und ihnen ihre Aufträge bringt. Dieser Prozess des Anforderns und Servierens der Benutzeroberfläche besteht aus drei Schritten:
- Auslöseneines Renders (Übergeben der Gästebestellung an die Küche)
- Rendernder Komponente (Zubereiten der Bestellung in der Küche)
- Commitzum DOM (Platzieren der Bestellung auf dem Tisch)
Auslösen
Rendern
Commit
Illustriert vonRachel Lee Nabors
Schritt 1: Einen Render auslösen
Es gibt zwei Gründe, warum eine Komponente gerendert wird:
- Es handelt sich um dasinitial Rendering der Komponente.
- Der State der Komponente (oder eines ihrer Vorfahren) wurde aktualisiert.
Initiales Rendering
Wenn deine App startet, musst du das initiale Rendering auslösen. Frameworks und Sandboxes verbergen diesen Code manchmal, aber er wird durchgeführt, indemcreateRootmit dem Ziel-DOM-Knoten aufgerufen wird und anschließend dessenrender-Methode mit deiner Komponente:
Versuche, denroot.render()-Aufruf auszukommentieren, und sieh zu, wie die Komponente verschwindet!
Neurendering bei State-Updates
Sobald die Komponente initial gerendert wurde, kannst du weitere Renderings auslösen, indem du ihren State mit derset-Funktion aktualisierst.Das Aktualisieren des States deiner Komponente reiht automatisch ein Rendering in die Warteschlange ein. (Du kannst dir das vorstellen wie einen Restaurantgast, der nach seiner ersten Bestellung Tee, Dessert und allerlei Dinge bestellt, je nachdem, wie durstig oder hungrig er ist.)
State-Update...
...löst aus...
...Rendering!
Illustriert vonRachel Lee Nabors
Schritt 2: React rendert deine Komponenten
Nachdem du ein Rendering ausgelöst hast, ruft React deine Komponenten auf, um herauszufinden, was auf dem Bildschirm angezeigt werden soll.„Rendering“ bedeutet, dass React deine Komponenten aufruft.
- Beim initialen Renderingruft React die Root-Komponente auf.
- Bei nachfolgenden Renderingsruft React die Funktionskomponente auf, deren State-Update das Rendering ausgelöst hat.
Dieser Prozess ist rekursiv: Wenn die aktualisierte Komponente eine andere Komponente zurückgibt, rendert React als NächstesdieseKomponente, und wenn diese Komponente ebenfalls etwas zurückgibt, rendert es als NächstesdieseKomponente, und so weiter. Der Prozess wird fortgesetzt, bis es keine weiteren verschachtelten Komponenten mehr gibt und React genau weiß, was auf dem Bildschirm angezeigt werden soll.
Im folgenden Beispiel wird ReactGallery()undImage()mehrmals aufrufen:
- Beim ersten Rendernwird Reactdie DOM-Knoten erstellenfür
<section>,<h1>und drei<img>-Tags. - Beim erneuten Rendernberechnet React, welche ihrer Eigenschaften sich seit dem vorherigen Rendern geändert haben. Es wird mit dieser Information erst im nächsten Schritt, der Commit-Phase, etwas tun.
Fallstrick
Rendern muss immer einereine Berechnungsein:
- Gleiche Eingaben, gleiche Ausgabe.Bei gleichen Eingaben sollte eine Komponente immer das gleiche JSX zurückgeben. (Wenn jemand einen Salat mit Tomaten bestellt, sollte er keinen Salat mit Zwiebeln erhalten!)
- Sie kümmert sich um ihre eigenen Angelegenheiten.Sie sollte keine Objekte oder Variablen ändern, die vor dem Rendern existierten. (Eine Bestellung sollte die Bestellung einer anderen Person nicht ändern.)
Andernfalls können verwirrende Fehler und unvorhersehbares Verhalten auftreten, wenn Ihre Codebasis komplexer wird. Bei der Entwicklung im "Strict Mode" ruft React die Funktion jeder Komponente zweimal auf, was helfen kann, Fehler durch unreine Funktionen aufzudecken.
Schritt 3: React überträgt Änderungen an das DOM
Nach dem Rendern (Aufrufen) Ihrer Komponenten wird React das DOM ändern.
- Beim ersten Rendernverwendet React dieappendChild()DOM-API, um alle erstellten DOM-Knoten auf dem Bildschirm zu platzieren.
- Bei erneuten Renderingswendet React die minimal notwendigen Operationen an (berechnet während des Renderings!), um das DOM an die neueste Rendering-Ausgabe anzupassen.
React ändert DOM-Knoten nur, wenn es einen Unterschied zwischen den Renderings gibt.Hier ist beispielsweise eine Komponente, die jede Sekunde mit anderen Props, die von ihrer Elternkomponente übergeben werden, neu gerendert wird. Beachten Sie, dass Sie Text in das<input>eingeben können, um seinenvaluezu aktualisieren, aber der Text verschwindet nicht, wenn die Komponente neu gerendert wird:
Das funktioniert, weil React in diesem letzten Schritt nur den Inhalt von<h1>mit der neuentimeaktualisiert. Es erkennt, dass das<input>im JSX an der gleichen Stelle wie beim letzten Mal erscheint, also berührt React das<input>– oder seinenvalue– nicht!
Epilog: Browser-Zeichnen
Nachdem das Rendern abgeschlossen ist und React das DOM aktualisiert hat, wird der Browser den Bildschirm neu zeichnen. Obwohl dieser Prozess als "Browser-Rendering" bekannt ist, werden wir ihn als "Zeichnen" bezeichnen, um Verwirrung in der Dokumentation zu vermeiden.
Illustriert vonRachel Lee Nabors
Zusammenfassung
- Jede Bildschirmaktualisierung in einer React-App erfolgt in drei Schritten:
- Trigger
- Rendering
- Commit
- Sie können den Strict Mode verwenden, um Fehler in Ihren Komponenten zu finden
- React berührt das DOM nicht, wenn das Rendering-Ergebnis dasselbe wie beim letzten Mal ist