Die Rendering-Phase und der DOM-Commit

Der Arbeitszyklus von React besteht aus zwei Hauptphasen: der Render-Phase und der Commit-Phase. In der Render-Phase ruft React Ihre Komponentenfunktionen auf und erstellt eine virtuelle Darstellung der Benutzeroberfläche (den Fiber-Baum). In der Commit-Phase wendet React die Änderungen aus dem Fiber-Baum auf das reale DOM an.

Im Concurrent Mode von React 18 kann die Render-Phase pausiert, unterbrochen oder neu gestartet werden. React kann Ihre Komponentenfunktion mehrmals aufrufen, bevor irgendetwas committed wird. Deshalb müssen Komponentenfunktionen rein sein – sie dürfen keine Seiteneffekte haben, da die Funktion möglicherweise mehr als einmal pro sichtbarer Aktualisierung ausgeführt wird.

Im Gegensatz zur Render-Phase ist die Commit-Phase immer synchron und wird vollständig ausgeführt. React kann während der Übernahme von DOM-Änderungen nicht unterbrochen werden. Dadurch bleibt das DOM niemals in einem teilweise aktualisierten Zustand. Nach jedem Commit sehen Benutzer immer eine vollständig konsistente Benutzeroberfläche.

Die Commit-Phase besteht aus drei Unterphasen: Before Mutation (hier wird bei Klassenkomponenten getSnapshotBeforeUpdate ausgeführt, um DOM-Werte vor den Änderungen zu lesen), Mutation (React fügt DOM-Knoten ein, aktualisiert und entfernt sie) und Layout (hier werden synchrone Effekte ausgelöst, insbesondere useLayoutEffect sowie componentDidMount/componentDidUpdate bei Klassenkomponenten).

useEffect ist ein passiver Effekt und wird daher nicht während der Commit-Phase ausgeführt. Nachdem die Commit-Phase abgeschlossen ist und der Browser die Anzeige gerendert hat, plant React passive Effekte asynchron ein. Sie werden ausgeführt, nachdem der Browser Gelegenheit hatte, das aktualisierte DOM auf dem Bildschirm darzustellen.

Der Browser rendert zwischen der Layout-Phase (in der useLayoutEffect ausgeführt wird) und der Phase der passiven Effekte (in der useEffect ausgeführt wird). Das ist der entscheidende zeitliche Unterschied: useLayoutEffect wird vor dem Paint ausgeführt, useEffect danach. Bei Effekten, die die visuelle Ausgabe verändern, ist dieser Unterschied besonders wichtig.

Wenn ein useEffect das DOM liest und den State aktualisiert (beispielsweise indem es ein Element misst und einen Größen-Status setzt), rendert React die Komponente erneut und führt einen weiteren Commit aus. Der Browser rendert zweimal: einmal mit der ursprünglichen Größe und einmal mit der korrigierten Größe. Benutzer sehen möglicherweise kurz die falsche Größe, bevor die Korrektur angezeigt wird.

React erstellt intern einen Baum aus „Fiber“-Knoten, einen pro Komponenteninstanz. Jeder Fiber enthält den Zustand, die Effects und die Ausgabe der Komponente. Während der Render-Phase erstellt React einen neuen Work-in-Progress-Fiber-Baum. Während der Commit-Phase wird der Work-in-Progress-Baum zum aktuellen Baum, und der alte Baum wird wiederverwendet.

React ruft im Strict Mode Komponentenfunktionen und Effects in der Entwicklung absichtlich zweimal auf, um Seiteneffekte leichter zu erkennen. Sowohl useLayoutEffect als auch useEffect werden gemountet, unmountet und erneut gemountet. Dieser doppelte Aufruf findet in der Produktion nicht statt. Dadurch werden Fehler sichtbar, bei denen Effects nicht ordnungsgemäß bereinigt werden.

Da die Render-Phase unterbrochen und erneut ausgeführt werden kann, müssen Komponentenfunktionen für dieselben Eingaben stets dieselbe Ausgabe liefern, ohne Seiteneffekte zu verursachen. Mutationen, Subscriptions und API-Aufrufe im Funktionsrumpf (nicht in Effects) werden im Concurrent Mode häufiger als erwartet ausgeführt und führen dadurch zu Fehlern.

Lesen Sie DOM-Eigenschaften niemals direkt im Funktionsrumpf der Komponente. Das DOM existiert möglicherweise noch nicht (beim serverseitigen Rendern) oder ist möglicherweise veraltet (bei erneuten Render-Vorgängen). Lesen Sie das DOM immer innerhalb von useLayoutEffect (für Lesevorgänge vor dem Paint) oder useEffect (für Lesevorgänge nach dem Paint), wo garantiert ist, dass das DOM aktuell ist.

In welcher Unterphase der React-Commit-Phase wird useLayoutEffect ausgeführt?

Die Render-Phase von React erstellt den Fiber-Baum und kann unterbrochen werden; die Commit-Phase wendet DOM-Änderungen an und ist immer synchron. Der Commit besteht aus drei Unterphasen: vor der Mutation, Mutation und Layout. useLayoutEffect wird in der Layout-Phase vor dem Paint ausgeführt. useEffect wird als passiver Effect nach dem Paint ausgeführt.