Wie implementiert man Hooks in React? Muss ich mich auf Fiber verlassen?

reagierenWie implementiert man Hooks? Muss die Implementierung von React Hooks auf Fiber angewiesen sein? Der folgende Artikel zeigt Ihnen, wie Hooks in verschiedenen Frameworks implementiert werden. Ich hoffe, er ist hilfreich für Sie!

Die Hooks von React sind Funktionen, die nach Fiber aufgetaucht sind, daher glauben viele Leute fälschlicherweise, dass Hooks auf Fiber angewiesen sind, um implementiert zu werden. Tatsächlich ist dies nicht der Fall. [Verwandte Empfehlung: Redis-Video-Tutorial]

Jetzt werden Hooks nicht nur in React implementiert, sondern diese Funktion wird auch in Frameworks wie Preact, React SSR, Midway usw. implementiert. Ihre Implementierung basiert nicht auf Glasfaser.

Werfen wir einen Blick darauf, wie Hooks in diesen verschiedenen Frameworks implementiert werden:

Wie React Hooks implementiert

react beschreibt die Schnittstelle über jsx, die von Kompilierungstools wie babel oder tsc in eine Renderfunktion kompiliert wird. und dann ausführen, um vdom zu generieren:

Die Renderfunktion hier war React.createElement vor React17:

Nach React 17 wurde sie in jsx geändert:

Diese jsx-Laufzeit wird automatisch ausgeführt eingeführt. Es ist nicht wie bisher erforderlich, für jede Komponente einen React-Import durchzuführen.

Render-Funktionsausführung generiert VDOM:

Die Struktur von VDOM ist wie folgt:

Vor React16 wird dieses VDOM rekursiv gerendert, wobei das echte Dom hinzugefügt, gelöscht und geändert wird.

Nachdem die Fiber-Architektur in React16 eingeführt wurde, gab es einen zusätzlichen Schritt: Zuerst vdom in Fiber konvertieren und dann die Fiber rendern.

Der Prozess der Konvertierung von VDOM in Fiber wird als Reconcile bezeichnet, und der letzte Prozess des Hinzufügens, Löschens und Änderns des echten Doms wird als Commit bezeichnet.

Warum müssen wir eine solche Umstellung durchführen?

Da vdom nur Verweise auf die untergeordneten Knoten des Knotens hat und keine Verweise auf den übergeordneten Knoten des übergeordneten Knotens und andere Geschwisterknoten, führt dies dazu, dass alle vdom-Knoten gleichzeitig und ohne Unterbrechung rekursiv auf den dom übertragen werden müssen.

Was passiert, wenn ich unterbrochen werde? Da der übergeordnete Knoten und die Geschwisterknoten nicht aufgezeichnet werden, können wir nur die untergeordneten Knoten weiter verarbeiten, andere Teile des VDOM jedoch nicht.

Aus diesem Grund hat React diese Art von Faserstruktur eingeführt, d . Die Struktur des

Faserknotens ist wie folgt:

Dieser Prozess kann unterbrochen und natürlich geplant werden, was der Zeitplanprozess ist.

Die Glasfaserarchitektur ist also in drei Phasen unterteilt: Planen, Abgleichen (VDOM in Glasfaser konvertieren) und Festschreiben (Auf Dom aktualisieren).

Hooks können in Funktionskomponenten verwendet werden, um auf einige Werte zuzugreifen, und diese Werte werden auf Faserknoten gespeichert.

Zum Beispiel verwendet diese Funktionskomponente 6 Hooks:

Dann verfügt der entsprechende Faserknoten über eine memorizedState-verknüpfte Liste mit 6 Elementen:

Verkettet bis weiter:

Unterschiedlich Die Hooks greifen auf Werte zu ​​auf verschiedenen Elementen der verknüpften Liste memorizedState. Dies ist das Prinzip von React Hooks.

Diese verknüpfte Liste verfügt über eine Erstellungsphase und eine Aktualisierungsphase. Sie werden also feststellen, dass die endgültige Implementierung von useXxx in mountXxx und updateXxx unterteilt ist:

Die Mount-Phase hier besteht darin, Hook-Knoten zu erstellen und sie zu einem zusammenzusetzen verknüpfte Liste:

Die erstellte Hook-verknüpfte Liste wird mit dem memorizedState-Attribut des Faserknotens verknüpft.

Beim Aktualisieren können Sie natürlich die Hook-Liste aus dem Faserknoten herausnehmen:

Auf diese Weise kann die useXxx-API bei mehreren Renderings den entsprechenden gespeicherten Status auf dem Faserknoten finden.

Dies ist das Prinzip von React Hooks. Sie können sehen, dass Hooks auf Faserknoten gespeichert werden.

Was ist also der Unterschied zwischen preact?

preact So implementieren Sie Hooks

preact ist ein leichteres Framework, das mit React-Code kompatibel ist. Es unterstützt Klassenkomponenten und Funktionskomponenten sowie React-Funktionen wie Hooks. Es implementiert jedoch nicht die Glasfaserarchitektur.

Weil es hauptsächlich auf die ultimative Größe (nur 3 KB) ankommt, nicht auf die ultimative Leistung.

Gerade haben wir erfahren, dass React die Hook-Liste auf dem Fiber-Knoten speichert. Wenn Preact keinen Fiber-Knoten hat, wo wird die Hook-Liste gespeichert?

Tatsächlich ist es leicht zu glauben, dass Fiber nur vdom modifiziert hat, um die Leistung zu verbessern, und dass es keinen wesentlichen Unterschied zu vdom gibt. Würde es also nicht ausreichen, den Hook auf vdom zu speichern?

Tatsächlich setzt preact die Hook-Liste auf vdom.

Zum Beispiel verfügt diese Funktionskomponente über 4 Hooks:

Ihre Implementierung besteht darin, auf den entsprechenden Hook auf vdom zuzugreifen:

Der Hook wird nicht wie bei React in Mount und Update unterteilt Stattdessen werden zwei Phasen zusammengeführt und gemeinsam verarbeitet.

Wie im Bild gezeigt, speichert es Hooks im Array von „component.__hooks“ und greift über Indizes auf sie zu.

Diese Komponente ist ein Attribut auf vdom:

Das heißt, der Wert von Hooks wird im Array von vnode._component._hooks gespeichert.

Vergleichen Sie den Unterschied zwischen React und Preact bei der Implementierung von Hooks:

• React speichert die Hook-Liste im Attribut fibreNode.memorizedState, während Preact die Hook-Liste im Attribut vnode._component._hooks speichert

• react Der Hook Die Hook-Liste in Preact ist ein Array und der Zugriff erfolgt über Indizes.

• react trennt die Erstellung und Aktualisierung der Hook-Liste, d. h. useXxx wird in mountXxx und updateXxx unterteilt preact

wird zusammengeführt und verarbeitet. Daher ist die Implementierung von hooks nicht auf Fiber angewiesen. Es muss nur ein Ort zum Speichern der Daten des Hooks gefunden werden, der der Komponente entspricht. Dabei spielt es keine Rolle, wo es gespeichert wird.

Da vdom, Fiber und Component Rendering eng miteinander verbunden sind, werden sie in diesen Strukturen gespeichert.

Wie React Ssr, um Hooks zu implementieren, existiert es weder auf Fiber noch auf VDOM:

Wie implementiert React Ssr Hooks? Verwenden Sie bei Verwendung von csr die Render-Methode von React-Dom:

Wenn Sie Ssr verwenden, verwenden Sie die RenderToString-Methode oder die RenderToStream-Methode von React-Dom/Server:

Glauben Sie, dass vdom wann in Fiber konvertiert wird? SSR verwenden?

Absolut nicht. Fiber ist eine Struktur, die eingeführt wurde, um die Rendering-Leistung bei der Ausführung im Browser zu verbessern, Berechnungen unterbrechbar zu machen und Berechnungen im Leerlauf durchzuführen.

Für das serverseitige Rendering ist natürlich keine Glasfaser erforderlich.

Wenn Glasfaser nicht benötigt wird, wo wird die Hakenliste gespeichert? vdom?

Es kann zwar in vdom platziert werden, ist es aber nicht.

Verwenden Sie beispielsweise Ref-Hooks:

Es handelt sich um eine verknüpfte Liste, die mit next verkettet ist, beginnend mit firstWorkInProgressHook.

Und der erste Hook-Knoten, der von firstWorkInProgressHook mit createHook erstellt wurde:

ist nicht auf vdom gemountet.

Warum?

Da ssr nur einmal gerendert und nicht aktualisiert werden muss, muss es nicht an vdom hängen.

Löschen Sie einfach die Hakenliste jedes Mal, wenn Sie mit der Verarbeitung der Haken jeder Komponente fertig sind:

Bei der Reaktion auf SSR sind also Hooks in globalen Variablen vorhanden.

Vergleichen Sie den Unterschied in den Implementierungsprinzipien von Hooks in React CSR und Ssr:

• csr erstellt Glasfaser aus vdom, die verwendet wird, um das Rendern unterbrechbar zu machen und die Leistung durch Leerlaufplanung zu verbessern, während ssr dies nicht tut Ja, vdom direkt rendert

• csr und speichert die Hooks im Faserknoten. Wenn ssr verwendet wird, wird es direkt auf der globalen Variablen platziert und nach der Verarbeitung jeder Komponente gelöscht. Weil es kein zweites Mal verwendet wird

• csr unterteilt die Erstellung und Aktualisierung von Hooks in zwei Phasen: Mounten und Aktualisieren, während ssr nur einmal verarbeitet wird, nur die Erstellungsphase

Prinzip von Implementierung von Hooks Tatsächlich ist es nicht kompliziert. Es wird lediglich eine verknüpfte Liste in einem bestimmten Kontext gespeichert, und dann greift die Hooks-API auf die entsprechenden Daten aus verschiedenen Elementen der verknüpften Liste zu, um deren jeweilige Logik zu vervollständigen. Dieser Kontext kann ein VDOM, Fiber oder sogar eine globale Variable sein.

Die Idee von Hooks ist jedoch immer noch sehr beliebt. Das von Taobao veröffentlichte serverseitige Framework Midway hat die Idee von Hooks eingeführt:

Midway So implementieren Sie Hooks

Midway ist ein Knoten. js-Framework:

Das serverseitige Framework verfügt natürlich nicht über Strukturen wie vdom und fibre, aber die Idee von Hooks basiert nicht auf diesen. Um die Hooks-API zu implementieren, müssen Sie nur eine Verknüpfung platzieren Liste in einem bestimmten Kontext.

Midway hat eine API implementiert, die den React-Hooks ähnelt:

Ich habe nicht gesehen, wo die Hook-Liste existiert, aber wir beherrschen bereits das Implementierungsprinzip von Hooks. Solange es einen Kontext dazu gibt Speichern Sie die Hook-Liste, es ist in Ordnung, überall ist es in Ordnung.

Zusammenfassung

React-Hooks sind eine Funktion, die nach der React-Fibre-Architektur entstanden ist. Viele Leute glauben fälschlicherweise, dass Hooks mit Fiber implementiert werden müssen. Wir haben uns die Implementierung von Hooks in React, Preact, React SSR und Midway angesehen und stellte fest, dass das nicht der Fall ist:

• react konvertiert vdom in Fiber, speichert dann die Hook-Liste im Attribut „fiber.memorizedState“ und verkettet sie bis zum nächsten Schritt.
• preact implementiert Fiber nicht, sondern fügt die Hook-Liste ein das vnode._component._hooks-Attribut oben, Array-Implementierung, beim Zugriff auf
• react ssr über Indizes ist keine Faser erforderlich, aber die Hook-Liste hängt nicht an vdom, sondern wird direkt auf einer globalen Variablen platziert, da sie nur gerendert werden muss Einmal und nach dem Rendern löscht die Komponente einfach diese globale Variable
• midway ist ein Node.js-Framework, das auch Hooks ähnliche APIs implementiert. Wir gehen nicht näher darauf ein, wo es platziert werden soll, aber solange es eine gibt Kontext zum Speichern der Hook-Liste, es wird in Ordnung sein

Also, reagieren Sie auf Hooks. Müssen wir uns auf Glasfaser verlassen, um dies zu erreichen?

Offensichtlich nicht, es kann mit Fiber, VDOM, globalen Variablen oder sogar jedem beliebigen Kontext verwendet werden.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Programmiervideos! !

Das obige ist der detaillierte Inhalt vonWie implementiert man Hooks in React? Muss ich mich auf Fiber verlassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!