In den letzten Monaten ist das Interesse der Entwicklercommunity an der neuen Version von React schnell gewachsen. Vor allem nachdem Lin Clark, die Codecartoonistin und Mozilla-Entwicklerin, bei der React Conf 2017 so hervorragend präsentiert hatte, wie React Fiber bei Animationen funktioniert. Wie lässt sich React Fiber in Kürze erklären? React Fiber ist eine Neuimplementierung des React Reconcilers. Es handelt sich um eine völlige Neufassung des Reconciliation-Algorithmus von React 15 (oder älteren Versionen), der nun im Nachhinein als React Stack bezeichnet wird, da er auf dem Konzept der Rekursion beruht.

Als React neu herauskam, war das virtuelle Dokumentenobjektmodell (Document Object Model – DOM) die revolutionärste Neuerung, da es das Schreiben von Anwendungen viel einfacher macht. Anstatt dem Browser genau zu sagen, was er tun muss, um die Benutzeroberfläche zu aktualisieren, konnte man React einfach sagen, wie die App in Zukunft aussehen sollte, und React kümmerte sich um alles Weitere. Der Reconciler ist der Teil von React, der den Algorithmus enthält, der zwei Bäume miteinander vergleicht (Diffing), um zu bestimmen, welche Teile geändert werden müssen. In den letzten Jahren wurde React refaktoriert, sodass Reconciliation und Rendering separate Phasen sind. Der Reconciler berechnet, welche Teile des Baums sich geändert haben. Der Renderer verwendet anschließend diese Information, um die gerenderte Anwendung tatsächlich zu aktualisieren. ReactDOM und React Native sind nur zwei der vielen Renderer, die mit React verwendet werden können. In der offiziellen React-Dokumentation [1] wird der Vorgang der Reconciliation ausführlich beschrieben.

Warum den Reconciler neu schreiben?

Einer der Hauptgründe dafür ist wohl das altbekannte Problem, mit dem wir in Browsern konfrontiert sind: Der Hauptthread ist derselbe wie der UI-Thread. Das Rendern der Webseite, das Reagieren auf Benutzeraktionen, die JavaScript-Verarbeitung, die Verwaltung der Netzwerkaktivitäten und die Bearbeitung des DOM erfolgen allesamt über den Hauptthread des Browsers. Obwohl heutzutage einige dieser Aufgaben durch Worker sicher und relativ einfach an einen anderen Thread übergeben werden können, ist nur der Hauptthread in der Lage, das DOM zu verändern. Ändert sich in React-Anwendungen der Zustand oder werden Eigenschaften (Props) aktualisiert, erstellt die Funktion render () einen neuen Baum von React-Elementen. Anschließend führt React den Reconciliation-Algorithmus durch, um zu erkennen, wie die Benutzeroberfläche effizient aktualisiert werden kann, um dem neuen Baum zu entsprechen.

Der Reconciler von React Stack verarbeitet den Komponentenbaum immer synchron in einem einzigen Durchgang. Dies hindert den Hauptthread daran, potenziell dringende Arbeit durchzuführen, solange der rekursive Prozess nicht beendet ist. Kommt es zu einer Texteingabe durch den Benutzer, während diese Berechnung stattfindet, kann es sein, dass die Anwendung nicht reagiert, was sich in einer abgehackten Bildwechselfrequenz und einer verzögerten Eingabe äußert. Das Hauptziel des neuen Fiber Reconcilers ist es, unterbrechbare Arbeit in mehrere Einheiten aufzuteilen. Dies bietet die Möglichkeit, verschiedene Arten von Updates zu priorisieren, sodass der Hauptthread entscheiden kann, den Diffing-Algorithmus auszusetzen, um dringendere Arbeiten durchzuführen. Zu einem späteren Zeitpunkt kann er dann an der Stelle fortfahren, an der die Unterbrechung stattfand. Wie im Scheduling-Abschnitt der Dokumentation der React-Konstruktionsprinzipien angeführt [2], wird Fiber folgende Funktionen gewährleisten: Wenn etwas im Hintergrund stattfindet, lässt sich sämtliche damit in Verbindung stehende Logik verzögern. Gehen die Daten schneller ein als die Bildrate, lassen sich Updates zusammenfassen...