Einführung in den Reaktionslebenszyklus

Einführung:

Wenn wir lernen wollen, zu reagieren, ist es wichtig, den Lebenszyklus zu verstehen. Nachdem wir jede Komponente des Lebenszyklus verstanden haben, wird es eine große Hilfe sein, Hochleistungskomponenten zu schreiben. 🔜

Legen Sie die Standard-Requisiten fest, oder Sie können dufaultProps verwenden, um die Standardeigenschaften der Komponente festzulegen. 2. Bei Verwendung der es6-Klassensyntax gibt es keine solche Hook-Funktion im Konstruktor. Zu diesem Zeitpunkt können Sie auf this.props

3 zugreifen. ComponentWillMount()

wird nur einmal aufgerufen, wenn die Komponente aktualisiert wird. Zu diesem Zeitpunkt kann der Status geändert werden.

4. render()

Der wichtigste Schritt des Reagierens, das Erstellen eines virtuellen Doms, das Ausführen des Diff-Algorithmus und das Aktualisieren des Dom-Baums werden hier erledigt. Zu diesem Zeitpunkt kann der Status nicht geändert werden.

5. ComponentDidMount()

wird nach dem Rendern der Komponente aufgerufen und nur einmal aufgerufen.

Update

6. ComponentWillReceiveProps(nextProps)

wird nicht aufgerufen, wenn die Komponente initialisiert wird, sondern wenn die Komponente neue Requisiten akzeptiert.

7. ShouldComponentUpdate(nextProps, nextState)

Ein sehr wichtiger Teil der Reaktionsleistungsoptimierung. Wird aufgerufen, wenn die Komponente einen neuen Status oder neue Requisiten akzeptiert. Wir können festlegen, ob die beiden Requisiten und der Status vor und nach dem Vergleich gleich sind. Wenn sie gleich sind, geben Sie false zurück, um die Aktualisierung zu verhindern, da derselbe Attributstatus definitiv dasselbe generiert DOM-Baum, daher ist es nicht erforderlich, einen neuen DOM-Baum zu erstellen und den alten DOM-Baum mit dem Diff-Algorithmus zu vergleichen, um viel Leistung zu sparen, insbesondere wenn die DOM-Struktur komplex ist

8 Wird nicht aufgerufen, wenn die Komponente initialisiert wird, sondern nur, wenn die Komponente aktualisiert wird. Zu diesem Zeitpunkt kann der Status geändert werden

Komponentenrendering

10. ComponentDidUpdate()

wird nicht aufgerufen, wenn die Komponente initialisiert wird. Es wird aufgerufen, nachdem die Komponentenaktualisierung abgeschlossen ist. Zu diesem Zeitpunkt kann der Dom-Knoten abgerufen werden.

Uninstall

11. ComponentWillUnmount()

wird aufgerufen, wenn die Bereitstellung der Komponente beendet werden soll. Einige Ereignis-Listener und Timer müssen zu diesem Zeitpunkt gelöscht werden.

Fazit

Das Obige ist der Lebenszyklus von React. Sie können den Code aufschreiben und selbst testen.

Verwandte Empfehlungen:

Reaktions-Tutorial

Das obige ist der detaillierte Inhalt vonEinführung in den Reaktionslebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!