Zusammenfassung der React-Grundlagen

Vorwort

Ich bereite mich gerade auf ein Vorstellungsgespräch vor. Ich habe einige Wissenspunkte zu React überprüft und hier zusammengefasst.

Start

React-Lebenszyklus

Der Lebenszyklus vor React 16 war wie folgt

Die Komponente wird beim ersten Rendern instanziiert. Anschließend werden die Funktionen componentWillMount, render und componentDidMount für die Instanz aufgerufen. Komponenten können beim Aktualisieren des Renderings die Funktionen componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render und componentDidUpdate aufrufen. Die Funktion componentWillUnmount kann aufgerufen werden, wenn die Komponente deinstalliert wird.

Ausgeliehenes Bild:

Ab React v16.3 empfiehlt React die Verwendung von getDerivedStateFromProps und getSnapshotBeforeUpdate als Ersatz für componentWillMount, componentWillReceiveProps und componentWillUpdate. Hierbei ist zu beachten, dass die beiden neu hinzugefügten Lebenszyklusfunktionen und die ursprünglichen drei Lebenszyklusfunktionen separat verwendet werden müssen und nicht gemischt werden können.

Aktueller Lebenszyklus (Leihbild):

Probleme mit componentWillMount

Einige Leute denken, dass asynchrone Anfragen im Voraus in componentWillMount gestellt werden können, um einen weißen Bildschirm zu vermeiden. Wenn React jedoch „Render“ aufruft, um die Seite zu rendern, wartet „Render“ nicht, bis die asynchrone Anforderung beendet ist, bevor Daten zum Rendern abgerufen werden. Diese Art des Schreibens birgt potenzielle Risiken.

Und nach der Reaktion auf Glasfaser kann es in einem Rendering mehrmals aufgerufen werden. Der Grund ist: Die React Fiber-Technologie verwendet inkrementelles Rendering, um das Problem verlorener Frames zu lösen. Jede Task-Einheit wird über requestIdleCallback geplant und ausgeführt, was unterbrochen und fortgesetzt werden kann. Sobald der Lebenszyklus unterbrochen wurde, wird der vorherige Lebenszyklus nach der Wiederherstellung erneut ausgeführt.

Neuer Lebenszyklus

statisches getDerivedStateFromProps

• Auslösezeit (geändert in v16.4): jedes Mal, wenn die Komponente erneut gerendert wird, auch nachdem die Komponente erstellt wurde (die letzte Ausführung vor dem Rendern) und jedes Mal, wenn neue Eigenschaften oder Zustände abgerufen werden. In der Version v16.3 lösen Komponentenstatusaktualisierungen diesen Lebenszyklus nicht aus
• Jedes Mal, wenn eine neue Eigenschaft empfangen wird, wird ein Objekt als neuer Status zurückgegeben. Wenn null zurückgegeben wird, bedeutet dies, dass der Status nicht aktualisiert werden muss.
• Mit componentDidUpdate können Sie alle Verwendungen von componentWillReceiveProps überschreiben
  

getSnapshotBeforeUpdate

Auslösezeit: wenn die Aktualisierung erfolgt, nach dem Rendern und vor dem Rendern des Komponenten-DOM.
Gibt einen Wert als dritten Parameter von componentDidUpdate zurück.
In Verbindung mit componentDidUpdate können alle Verwendungen von componentWillUpdate abgedeckt werden.

Reagieren Sie auf Faser

Sobald der React-Rendering-/Aktualisierungsprozess gestartet ist, kann er nicht mehr unterbrochen werden und belegt weiterhin den Hauptthread. Der Hauptthread ist mit der Ausführung von JS beschäftigt und hat keine Zeit, sich um andere Dinge (Layout, Animation) zu kümmern, was zu schlechten Erfahrungen wie Frame-Drops, verzögerten Antworten (oder sogar keiner Antwort) führt. Fiber entstand.

Fiber ist eine Rekonstruktion des Kernalgorithmus von React Reconciler. Zu den Hauptmerkmalen gehören:

• Inkrementelles Rendering (die Rendering-Aufgabe in Blöcke aufteilen und diese gleichmäßig auf mehrere Frames verteilen)
• Möglichkeit zum Anhalten, Beenden und Wiederverwenden von Rendering-Aufgaben während Aktualisierungen
• Priorisieren Sie unterschiedliche Arten von Updates
• Neue Basisfunktionen für Parallelität
  

Inkrementelles Rendering wird verwendet, um das Problem verlorener Frames zu lösen. Nachdem die Rendering-Aufgabe aufgeteilt wurde, wird jedes Mal nur ein kleiner Teil ausgeführt. Nachdem jeder Teil abgeschlossen ist, wird die Zeitsteuerung an den Hauptthread zurückgegeben, anstatt ihn wie zuvor lange zu belegen.

Faserbaum

• Der Reconciler vor Fiber (Stack Reconciler genannt) mountet/aktualisiert rekursiv von oben nach unten und kann nicht unterbrochen werden (belegt kontinuierlich den Hauptthread). Daher können periodische Aufgaben wie Layout und Animation im Hauptthread und interaktive Antworten nicht sofort verarbeitet werden, was sich auf das Erlebnis auswirkt.
• Fiber löst dieses Problem, indem es den Rendering-/Aktualisierungsprozess (rekursiver Diff) in eine Reihe kleiner Aufgaben aufteilt, jedes Mal einen kleinen Teil des Baums überprüft und prüft, ob Zeit bleibt, mit der nächsten Aufgabe fortzufahren. Wenn Zeit bleibt, wird fortgefahren. Wenn nicht, wird der Vorgang unterbrochen und fortgesetzt, wenn der Hauptthread nicht beschäftigt ist.

Der Faserbaum ist eigentlich eine einzelne verknüpfte Listenstruktur, wobei das Kind auf den ersten untergeordneten Knoten, die Rückgabe auf den übergeordneten Knoten und das Geschwister auf den nächsten Geschwisterknoten verweist. Der Aufbau ist wie folgt:

// Faserbaum-Knotenstruktur {
    Zustandsknoten,
    Kind,
    zurückkehren,
    Geschwister,
    ...
}

Glasfaser-Abgleicher

Der Abstimmungsprozess gliedert sich in zwei Phasen:

1. (Unterbrechbar) Rendering/Abgleich leitet Änderungen durch den Aufbau eines workInProgress-Baums ab

2. (Unterbrechungsfreies) Commit wendet diese DOM-Änderungen an (aktualisiert den DOM-Baum, ruft Komponenten-Lebenszyklusfunktionen auf und aktualisiert interne Zustände wie ref)

Der Prozess zum Erstellen des workInProgress-Baums ist der Prozess von diff. Wir planen eine Gruppe von Aufgaben über requestIdleCallback. Nach Abschluss jeder Aufgabe prüfen wir, ob es Warteschlangenspringer (dringender) gibt. Nach Abschluss jeder Aufgabengruppe geben wir die Zeitsteuerung bis zum nächsten requestIdleCallback-Rückruf an den Hauptthread zurück, um mit dem Erstellen des workInProgress-Baums fortzufahren.

Der Lebenszyklus ist ebenfalls in zwei Phasen unterteilt:

// Phase 1 Rendering/Abgleich
KomponenteWillMount
KomponenteWillReceiveProps
sollteKomponentenupdate
Komponente wird aktualisiert

//Phase 2-Commit
KomponenteDidMount
KomponenteDidUpdate
KomponenteWillUnmount

Die Lebenszyklusfunktion in Phase 1 kann mehrfach aufgerufen werden. Sie wird standardmäßig mit niedriger Priorität ausgeführt. Wenn sie durch eine Aufgabe mit hoher Priorität unterbrochen wird, wird sie später erneut ausgeführt.

Faserbaum und WorkInProgress-Baum

Doppelpufferungstechnologie: Dies bedeutet, dass nach dem Erstellen des workInProgress-Baums ein neuer Faserbaum abgerufen wird und der aktuelle Zeiger dann auf den workInProgress-Baum zeigt. Da die Faser und workInProgress aufeinander verweisen, wird die alte Faser als reservierter Speicherplatz für die Aktualisierung der neuen Faser verwendet, wodurch der Zweck der Wiederverwendung von Faserinstanzen erreicht wird.

Jede Faser hat eine alternative Eigenschaft, die ebenfalls auf eine Faser verweist. Beim Erstellen eines workInProgress-Knotens wird der Alternative Priorität eingeräumt. Wenn keine Alternative vorhanden ist, erstellen Sie eine.

lassen Sie workInProgress = aktuell.alternate;
wenn (workInProgress === null) {
  //...
  workInProgress.alternate = aktuell;
  aktuell.alternativ = in Arbeit;
} anders {
  // Wir haben bereits eine Alternative.
  // Setzt das Effekt-Tag zurück.
  workInProgress.effectTag = Kein Effekt;

  // Die Effektliste ist nicht mehr gültig.
  workInProgress.nextEffect = null;
  workInProgress.firstEffect = null;
  workInProgress.lastEffect = null;
}

Die Vorteile davon:

• Möglichkeit zur Wiederverwendung interner Objekte (Fasern)
• Sparen Sie Speicherzuweisung und GC-Zeit-Overhead
  

Wiederherstellung nach Glasfaserausfällen

Unterbrechen: Überprüfen Sie die aktuell verarbeitete Arbeitseinheit, speichern Sie die aktuellen Ergebnisse (firstEffect, lastEffect), ändern Sie das Tag, beenden Sie es schnell und öffnen Sie einen weiteren requestIdleCallback. Führen Sie dies beim nächsten Mal aus, wenn Sie die Möglichkeit dazu haben.

Haltepunktwiederherstellung: Wenn Sie die Arbeitseinheit das nächste Mal verarbeiten, sehen Sie, dass das Tag die unterbrochene Aufgabe ist. Dann können Sie mit der Ausführung des unvollendeten Teils fortfahren oder ihn wiederholen.

PS: Ob es sich um eine „natürliche“ Unterbrechung aufgrund von Zeitmangel oder eine grobe Unterbrechung durch eine Aufgabe mit hoher Priorität handelt, ist für den Unterbrechungsmechanismus dasselbe.

Reagiere auf setState

Nach dem Aufruf der Funktion setState im Code führt React das übergebene Parameterobjekt mit dem aktuellen Status der Komponente zusammen und löst dann den sogenannten Abstimmungsprozess aus. Nach dem Abstimmungsprozess erstellt React den React-Elementbaum relativ effizient entsprechend dem neuen Status und fährt mit der erneuten Darstellung der gesamten Benutzeroberfläche fort. Nachdem React den Elementbaum erhalten hat, berechnet es automatisch die Knotenunterschiede zwischen dem neuen und dem alten Baum und minimiert und rendert die Schnittstelle dann basierend auf den Unterschieden erneut. Im Differenzberechnungsalgorithmus kann React relativ genau erkennen, welche Positionen sich geändert haben und wie sie geändert werden sollten, wodurch On-Demand-Updates anstelle eines vollständigen erneuten Renderings sichergestellt werden.

setState wird manchmal synchron (settimeout, benutzerdefinierte DOM-Ereignisse) und manchmal asynchron (normale Aufrufe) aufgerufen.

Ereignismechanismus reagieren

React-Ereignisse werden über den Ereignisproxy gleichmäßig auf das äußerste Dokument verteilt und sind nicht an den eigentlichen Dom-Knoten gebunden. Darüber hinaus umschließt React das native Event-Objekt intern. Es hat dieselbe Schnittstelle wie die nativen Ereignisse des Browsers, einschließlich stopPropagation() und preventDefault().

Das Obige ist der detaillierte Inhalt der Zusammenfassung der Grundkenntnisse von React. Weitere Informationen zu den Grundkenntnissen von React finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!