Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Anwendungen rendern und aktualisieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Performante Anwendungen zu ermöglichen, ist ein erklärtes Ziel von React. Lernen Sie, wie der Update-Prozess in React umgesetzt ist und wie sicher gestellt wird, dass nur zwingend notwendige Veränderungen am Browser-DOM vorgenommen werden.
07:27

Transkript

Beim Thema Performance kann React mit besonders ausgeklügelten Mechanismen auftrumpfen. Das Framework möchte am Ende des Tages maximale Performanz gewährleisten und ist daher bestrebt, das DOM des Browsers möglichst selten zu manipulieren. Im einfachsten Fall könnte React einfach bei jedem Render- und Updatevorgang das komplette DOM anhand der render-Methoden in ihre Komponenten neu berechnen, und das DOM im Browser entsprechend aktualisieren. Problematisch ist dabei, dass Änderungen im Browser-DOM vergleichsweise teuer sind, also viel Rechenleistung beanspruchen. Das heißt, React ist bestrebt, das Browser-DOM möglichst nur dann anzufassen, wenn eine Änderung tatsächlich nötig ist. Schließlich werden sich beispielsweise beim Drücken einer Schaltfläche nur die wenigsten DOM-Nodes tatsächlich ändern. React geht also beim Rendern folgendermaßen vor. Zuerst wird React-intern rekursiv ein virtuelles DOM aufgebaut, beginnend bei der Komponente, die in ReactDOM.Render aufgerufen wird, und weiter über die render-Methoden aller verwendeten Komponenten, bis auch das letzte div aufgelöst ist. Beim initialen Rendern müssen nun alle diese virtuellen DOM-Nodes in echte DOM-Nodes verwandelt und geschrieben werden. Falls Sie aber ein Update angestoßen haben, werden nun diese virtuellen Nodes folgendermaßen von oben nach unten traversiert und überprüft. shouldComponentUpdate() wird aufgerufen und damit ein schneller Check durchgeführt, ob die aktuelle Komponente weiter betrachtet werden muss. Diese Methode liefert standardmäßig, ohne dass Sie sie überschreiben, true zurück, das heißt, es besteht keine Optimierung. Sie können diese Methode jedoch überschreiben und eine Fallunterscheidung einbauen, die false zurückgibt, wenn Sie bereits an dieser Stelle erkennen können, ob ein Update notwendig ist. Wenn shouldComponentUpdate true zurückgeliefert hat, wird der entsprechende neue vDOMnode erzeugt und mit dem passenden alten vDOMnode verglichen. Wenn hier keine Änderungen feststellbar sind, muss diese Komponente und ihre Unterkomponenten nicht weiter aktualisiert werden. Bitte beachten Sie, dass beim Vergleich von vDOMnodes nur die Props miteinander verglichen werden. Der Zustand oder State der Komponenten wird als intern betrachtet und nicht verglichen. Falls sich Unterschiede zum alten vDOMnode ergeben haben, wird der sogenannte Reconciliation-Prozess angestoßen. Dieser vergleicht die bestehenden DOM-Nodes im Browser mit dem neu generierten vDOMnodes in React und stellt fest, welche tatsächlichen Änderungen nun am DOM durchgeführt werden müssen. Sie sehen also, dass React im Sinne der Update-Performance nur das Nötigste tut, um teure Update-Operationen im DOM möglichst gering zu halten. Lassen Sie uns diesen Prozess anhand eines Beispiels der offiziellen Dokumentation nachvollziehen. Wir sehen in diesem Beispiel ein DOM, bestehend aus acht Komponenten, durchnummeriert von C1 bis C8. Der Update-Prozess beginnt damit, dass C1 aktualisiert werden soll. Wie geht React also vor, um festzustellen, welche Nodes nun tatsächlich aktualisiert werden müssen? Der erste Schritt bei diesem Check ist immer, es wird die Methode shouldComponentUpdate aufgerufen. Das heißt, React beginnt bei Komponente C1, führt shouldComponentUpdate aus, und sieht, shouldComponentUpdate liefert true zurück. Das erkennen wir an der Annotation SCU in Grün. Das heißt, C1 wird wahrscheinlich schonmal geupdatet werden müssen. Jetzt kann sich React die Children von C1 anschauen und geht weiter über zu C2. Bei C2 wird auch shouldComponentUpdate durchgeführt, ist aber hier in Rot markiert. Das heißt, es hat false zurückgeliefert. Das wiederum heißt für React, wir müssen C2 und damit auch die Kinder von C2, nämlich C4 und C5, überhaupt nicht weiter betrachten. Wir wissen, dass C2 nicht updaten muss. Deshalb ist dieser Teil des Baums weiterhin aktuell und wir können uns die weiteren Children von C1 anschauen. Damit sind wir bei C3 angekommen. Auch hier führen wir shouldComponentUpdate aus. Und wir sehen, es wird true zurückgeliefert. Also können wir hier nicht abkürzen und müssen uns auch alle Children von C3 anschauen. Weiter geht es mit C6. Auch hier shouldComponentUpdate. Wir bekommen true zurück. Deshalb müssen wir weiter evaluieren. Da C6 keine weiteren Children hat, kommen wir im nächsten Schritt des Update-Prozesses an. Nachdem shouldComponentUpdate true zurückgeliefert hat, wird jetzt das neue vDOM aufgebaut, basierend auf den neuen Props. Und mit dem alten, also bisher aktuellen vDOM verglichen. Das sehen wir an der Annotation vDOMEq. Und diese Annotation ist in Rot markiert. Das heißt unten in der Legende "are virtual DOMs equivalent?". Dadurch, dass diese Annotation rot markiert ist, wissen wir, nein, die virtuellen DOMs sind nicht äquivalent. Das heißt, React muss davon ausgehen, dass sich hier etwas geändert hat. Deshalb wird bei C6 auch der dritte Schritt im Update-Prozess angestoßen, nämlich die sogenannte Reconciliation. Deshalb ist der Knoten C6 auch rot ausgefüllt. Das heißt, hier wird das neue vDOM für C6 mit dem tatsächlich existenten DOM im Browser verglichen, und schließlich alle Änderungen in das Browser-DOM gepusht. Damit wäre C6 abgeschlossen. Wir können übergehen zu C7. In C7 liefert shouldComponentUpdate ein false zurück. Das heißt, bei C7 haben wir den Vergleich also auch sofort schon abgeschlossen. Wir können weiter übergehen zu C8. Bei C8 führen wir auch shouldComponentUpdate aus. Dieses liefert true zurück. Also müssen wir wieder einen Schritt weiter gehen. Das neue vDOM für C8 wird aufgebaut und mit dem alten vDOM verglichen. Hier sehen wir aber vDOMEq, also virtual DOM equivalent, ist auf true gesetzt. Das heißt, das neue vDOM sieht genauso aus wie das bisherige vDOM. Damit müssen wir keine Reconciliation anstoßen und wir müssen kein Update im Browser durchführen. Da wir nun alle Children von C3 überprüft haben, kann das gesamte Ergebnis an C3 übergeben werden. Wir sehen, dass bei C6 die vDOMs neu und alt nicht äquivalent waren. Deshalb muss eine Reconciliation für C6 angestoßen werden, damit eben auch für C3. Und diese Tatsache zieht sich nach oben bis zu C1. Das heißt also zusammenfassend, React konnte bei einem DOM mit acht Elementen in diesem Fall durch den abgestuften Update-Mechanismus feststellen, dass sich eigentlich nur in einem Node, nämlich C6, wirklich etwas geändert hat. Dabei können die Nodes C2, C4, C5, C7, und C8 unangetastet belassen werden. Und eigentlich muss nur C6 geändert werden, und damit auch C3 und C1. In diesem Video habe ich Ihnen erklärt, welche Prozesse in React dafür verantwortlich sind, eine hohe Performanz beim Rendern, insbesondere dem Updaten, zu gewährleisten. Sie wissen nun, dass der Update-Vorgang in React in drei Stufen stattfindet. shouldComponentUpdate für einen schnellen ersten Check. Vergleich des alten vDOMnode mit dem neuen vDOMnode. Sowie Reconciliation, um nötige Änderungen im Browser-DOM festzustellen.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!