Der Reaktionslebenszyklus ist in mehrere Phasen unterteilt

Der Reaktionslebenszyklus ist in drei Phasen unterteilt: 1. Die Erstellungsphase, auch Initialisierungsphase genannt, die den Prozess darstellt, bei dem die Komponente zum ersten Mal im DOM-Baum gerendert wird; , auch Existenzphase genannt, gibt den Prozess des erneuten Renderns von Komponenten an. 3. Die Entladephase, auch Zerstörungsphase genannt, gibt den Prozess an, bei dem Komponenten aus dem DOM gelöscht werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Der Reaktionslebenszyklus ist in mehrere Phasen unterteilt

Das Konzept des Lebenszyklus ist weit verbreitet, insbesondere in vielen Bereichen wie Wirtschaft, Umwelt, Technologie, Gesellschaft usw. Seine Grundbedeutung kann im Volksmund als „aus dem Ganzen“ verstanden werden Prozess von „Cradle-to-Grave“

Wie bei Vue umfasst der gesamte Komponentenlebenszyklus von React eine Reihe von Prozessen von der Erstellung über die Initialisierung von Daten, das Kompilieren von Vorlagen, das Mounten von Dom → Rendern, Aktualisieren → Rendern, Deinstallieren usw.

Prozess

Hier sprechen wir hauptsächlich über den Lebenszyklus nach React16.4, der in drei Phasen unterteilt werden kann:

• Erstellungsphase

• Aktualisierungsphase

• Deinstallationsphase

Erstellungsphase

Erstellungsphase Es ist hauptsächlich in die folgenden Lebenszyklusmethoden unterteilt:

• Konstruktor (fragen Sie mich nicht, warum ich Chinesisch verwende, denn Englisch wird verschluckt, das ist zu schwierig)

• getDerivedStateFromProps

• render

• componentDidMount

Constructor

Eine Methode, die während des Instanzprozesses automatisch aufgerufen wird. Innerhalb der Methode werden Requisiten von der übergeordneten Komponente über das Schlüsselwort super abgerufen. Bei dieser Methode sind die üblichen Vorgänge: Initialisieren Sie den Status oder hängen Sie an dieser Lademethode

getDerivedStateFromProps

Diese Methode ist eine neue Lebenszyklusmethode. Es handelt sich um eine statische Methode, sodass sie nicht auf die Instanz der Komponente zugreifen kann. Ausführungszeitpunkt: Komponentenerstellungs- und Aktualisierungsphase Unabhängig davon, ob es sich um eine Requisitenänderung oder eine Statusänderung handelt, wird vor jeder Rendermethode

aufgerufen. Der erste Parameter ist der Status der zu aktualisierenden Requisiten, und der zweite Parameter ist der Status des vorherigen Status, der hinzugefügt werden soll Einige Einschränkungen, um einen nutzlosen Zustand zu verhindern. Update

Diese Methode muss ein neues Objekt als neuen Zustand zurückgeben oder null zurückgeben, um anzuzeigen, dass der Zustand nicht aktualisiert werden muss.

render

Eine Methode, die Klassenkomponenten implementieren müssen um die DOM-Struktur zu rendern und auf den Komponentenstatus und die Requisiteneigenschaften zuzugreifen der echte DOM-Knoten und wird nach der Render-Methode ausgeführtDiese Methode wird hauptsächlich zum Ausführen einiger Datenerfassungs-, Ereignisüberwachungs- und anderer Vorgänge verwendet

Aktualisierungsphase

Die Funktionen in dieser Phase sind hauptsächlich die folgenden Methoden:

getDerivedStateFromProps

shouldComponentUpdate

render

• getSnapshotBefore Update

• componentDidUpdate

• getDerivedStateFromProps

• Diese Methode wird wie oben eingeführt

• shouldComponentUpdate

wird zum Ermitteln verwendet Die Komponente selbst gibt an, ob sie basierend auf den aktuellen Requisiten und dem aktuellen Status neu gerendert werden muss. Standardmäßig wird „true“ zurückgegeben. Ausführungszeitpunkt: Wird aufgerufen, wenn neue Requisiten oder ein neuer Status erreicht werden, und informiert darüber, ob die Komponente aktualisiert wird oder nicht, indem man „true“ oder „false“ zurückgibt. Im Allgemeinen wird nicht empfohlen, in dieser Zyklusmethode tiefe Vergleiche durchzuführen, da SetState nicht gleichzeitig aufgerufen werden kann, da sonst eine Endlosschleife zum Aufrufen von Aktualisierungen entsteht

rendern

Die Einführung ist wie oben

getSnapshotBeforeUpdate

Diese periodische Funktion wird nach dem Rendern ausgeführt und das DOM-Element wurde zum Zeitpunkt der Ausführung nicht aktualisiert

Ein von dieser Methode zurückgegebener Snapshot-Wert wird übergeben in als dritter Parameter von ComponentDidUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

Der Zweck dieser Methode besteht darin, vor der Aktualisierung der Komponente einige Informationen abzurufen, z. B. die Bildlaufposition der Komponente. Nach der Aktualisierung der Komponente können einige visuelle Zustände der Benutzeroberfläche wiederhergestellt werden Diese Informationen

componentDidUpdate

Ausführungszeitpunkt: Komponentenaktualisierung Wird nach Abschluss ausgelöst

Mit dieser Methode können Sie entsprechende Vorgänge basierend auf den Änderungen in Requisiten und Status davor und danach ausführen, z. B. Daten abrufen, DOM-Stile ändern usw .

Entladephase

componentWillUnmount

Diese Methode wird verwendet, bevor die Komponente deinstalliert wird, um einige registrierte Abhörereignisse zu bereinigen oder abonnierte Netzwerkanforderungen abzubrechen usw.

Sobald eine Komponenteninstanz deinstalliert ist, wird sie nicht mehr deinstalliert wieder montiert, kann aber nur neu erstellt werden

Lernempfehlung: „

Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonDer Reaktionslebenszyklus ist in mehrere Phasen unterteilt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!