Eine detaillierte Erklärung, wie React Fiber funktioniert

Was ist React Fiber?

React Fiber ist, einfach ausgedrückt, eine neue Koordinierungs-Engine, die in React v16 eingeführt wurde, um inkrementelles Rendering von Virtual DOM zu implementieren.

Für Laien ausgedrückt: Es handelt sich um eine Verarbeitungsmethode, die den Aktualisierungsprozess der React-Ansicht reibungsloser gestalten kann.

Wir alle wissen: Prozesse sind groß, Threads sind klein. Fasern sind Verarbeitungsmechanismen mit feinerer Körnigkeit als Fäden. Sie können es auch anhand dieses Wortes erraten: React Fiber wird sehr „dünn“ sein. Lesen Sie weiter, um die Einzelheiten zu erfahren.

Warum React Fiber?

Wie bereits erwähnt wurde React Fiber entwickelt, um den Ansichtsaktualisierungsprozess von React reibungsloser zu gestalten. Warum? Das React-Ansichtsupdate verlief vorher nicht reibungslos?

Das stimmt. Vor React v16 gab es bei den Ansichtsaktualisierungen von React große Leistungsprobleme, von denen das auffälligste der synchrone Aktualisierungsmechanismus war.

Bevor React entscheidet, einen Komponentenbaum zu laden oder zu aktualisieren, führt es ungefähr die folgende Reihe von Aktionen aus: Aufrufen der Lebenszyklusfunktion jeder Komponente --> Berechnen und Vergleichen des virtuellen DOM --> Aktualisieren des realen DOM-Baums. Dieser Prozess ist synchron, d. h., sobald der Prozess gestartet ist, wird er in einem Durchgang ausgeführt, bis der eigentliche DOM-Baum aktualisiert ist.

Dieser Mechanismus wird jedoch problematisch, wenn der Komponentenbaum groß ist: Ein Komponentenbaum mit 300 Komponenten muss vollständig aktualisiert werden. Angenommen, eine Komponentenaktualisierung dauert nur 1 ms, dauert die Aktualisierung des gesamten Baums 300 ms. Während dieses 300-ms-Zeitraums hat sich der Haupt-Thread des Browsers auf die Aktualisierung des Komponentenbaums „konzentriert“ (der Funktionsaufrufstapel ist zu diesem Zeitpunkt sehr lang) und ist gegenüber allen Vorgängen auf der Seite „gleichgültig“. Wenn der Benutzer während dieser Zeit ein paar Wörter in ein Eingabefeld eingibt, erfolgt keine Antwort auf der Seite, da für die Darstellung der Ergebnisse der Tasteneingabe auch der Hauptthread erforderlich ist, der Hauptthread zu diesem Zeitpunkt jedoch mit der Aktualisierung des Komponentenbaums beschäftigt ist. Nach 300 ms kann der Hauptthread des Browsers die gerade in das Eingabefeld eingegebenen Wörter rendern.

Es ist wirklich zu langsam.

Aufgrund der Single-Thread-Arbeitseigenschaften von JavaScript gab es in der Branche schon immer ein Prinzip: Keine Aktion sollte den Hauptthread für längere Zeit beanspruchen. Wenn der Hauptthread für längere Zeit nicht zurückgegeben wird, kann das Programm während dieser Zeit nicht auf andere Eingaben reagieren. Nach der Eingabe erfolgt keine Reaktion oder die Reaktion ist sehr langsam, was wir oft als „Verzögerung“ bezeichnen. Offensichtlich verstößt der synchrone Aktualisierungsmechanismus von React gegen dieses Prinzip, wenn der Komponentenbaum riesig ist, was ein großes Tabu ist.

Aus diesem Grund wurde React Fiber entwickelt: um den Leistungsengpass alter React-Ansichtsaktualisierungen zu beheben.

Wie funktioniert React Fiber?

Erstens löst React Fiber nicht das Problem zeitaufwändiger Aktualisierungen großer Komponentenbäume. Tatsächlich ist der Gesamtzeitaufwand immer noch derselbe. Aber es löst ein Problem, das von vielen Entwicklern kritisiert wurde: die lange Belegung des Haupt-Threads.

Die Lösung lautet: Sharding.

Das Funktionsprinzip besteht darin, die zeitaufwändige Aktualisierungsaufgabe in kleine Aufgabensegmente aufzuteilen und jedes kleine Aufgabensegment nach der Ausführung an den Hauptthread zurückzugeben, um zu prüfen, ob noch andere dringende Aufgaben zu erledigen sind. Wenn beim Zurückkehren zum Haupt-Thread eine dringende Aufgabe gefunden wird, wird die aktuelle Aktualisierungsaufgabe sofort gestoppt und der Haupt-Thread wird aufgefordert, stattdessen die dringende Aufgabe auszuführen. Nachdem der Haupt-Thread die dringende Aufgabe abgeschlossen hat, führt er die Aktualisierungsaufgabe erneut aus. (Hinweis ⚠️: Es geht darum, von vorne zu beginnen! Nicht an der letzten Unterbrechungsstelle fortzufahren); wenn keine dringende Aufgabe vorliegt, trauen Sie sich, mit dem nächsten Aufgabenabschnitt fortzufahren.

Einfach ausgedrückt wird dadurch die Priorität von Ansichtsaktualisierungen gesenkt und der Aktualisierungsprozess fragmentiert.

Schauen wir uns nun an, wie React Fiber einen Aktualisierungsprozess handhabt:

1. Ein Aktualisierungsprozess ist in die Abstimmungsphase und die Commit-Phase unterteilt. Die Abstimmungsphase (Planungsphase) aktualisiert die Daten und generiert einen neuen virtuellen DOM und führt einen Diff-Test des alten und neuen virtuellen DOM durch, um die zu aktualisierenden Elemente abzurufen und sie in eine neue Aktualisierungswarteschlange zu stellen. Die Commit-Phase (Renderingphase) durchläuft die Aktualisierungswarteschlange und aktualisiert alle Änderungen gleichzeitig am realen DOM.
2. Die Abstimmungsphase ist in Shards aufgeteilt. Diese Phase kann durch dringlichere Aufgaben unterbrochen werden, und die Shard-Aufgaben müssen möglicherweise nach der Hälfte neu gestartet werden.
3. Für die Commit-Phase wird das DOM in einem Rutsch aktualisiert und kann nicht unterbrochen werden.
   

Das Implementierungsprinzip von React Fiber

Bei der Implementierung von React Fiber gibt es zwei Schwierigkeiten: Wie implementiert man Pause/Neustart? Wie verteile ich Aufgaben?

Im ersten Fall bedeutet Pause/Neustart, dass wir den Status speichern müssen. Hier wird in der Implementierung der „Single Linked List Tree Traversal Algorithm“ mit verknüpften Listen und Zeigern verwendet, um die vorherigen und nächsten Schritte im Traversierungsprozess aufzuzeichnen.

Für Letzteres werden die beiden APIs requestAnimationFrame und requestIdelCallback verwendet. Dabei wird requestAnimationFrame vom Browser in jedem Frame ausgeführt und einige Aufgaben mit hoher Priorität können dort platziert werden; requestIdelCallback hingegen wird vom Browser nur ausgeführt, wenn am Ende eines Frames freie Zeit vorhanden ist und einige Aufgaben mit niedriger Priorität können dort platziert werden, was Polyfill erfordert (aufgrund mangelnder Kompatibilität).

Welchen Einfluss hat React Fiber auf unsere tägliche Entwicklung?

React Fiber kann während der Abstimmungsphase die folgenden Lebenszyklusfunktionen aufrufen (was auch bedeutet, dass die Lebenszyklusfunktionen in dieser Phase während eines Lade- und Aktualisierungsprozesses mehrmals aufgerufen werden können):

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps
• shouldComponentUpdate
  

Wenn Sie keine React-Hooks verwenden und stattdessen herkömmliche Klassenkomponenten für die Entwicklung nutzen, denken Sie daran, keine Vorgänge auszuführen, die in den oben genannten Lebenszyklusfunktionen nur einmal ausgeführt werden müssen (z. B. das Einleiten einer Ajax-Anforderung zum Abrufen von Daten beim Initialisieren der Seite).

Wenn Sie normalerweise React-Hooks für die Entwicklung verwenden, ist das in Ordnung. Schauen Sie es sich einfach zum Spaß an.

Oben finden Sie eine ausführliche Erklärung zur Funktionsweise von React Fiber. Weitere Informationen zur Funktionsweise von React Fiber finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!