Was ist der Lebenszyklus von Reactjs? Detaillierte Einführung in den Lebenszyklus von ReactJS

In diesem Artikel geht es hauptsächlich um die Einführung des Lebenszyklus von reactjs sowie um die Einführung des setState-Mechanismus von React. Werfen wir einen Blick auf den Hauptinhalt des Artikels

Leben Der Gesamtzyklus ist einmalig und irreversibel. Der Lebenszyklus der Softwareentwicklung beginnt je nach Methode erneut. Eine vorläufige Untersuchung des Lebenszyklus wird nach einer breiten Definition beschrieben und kann in Mounten, Rendern und Deinstallieren unterteilt werden.

Der Lebenszyklus ist in zwei Kategorien unterteilt:

1) Wenn die Komponente montiert oder demontiert wird

2) Wenn die Komponente neue Daten akzeptiert, wird die Komponente aktualisiert

1) Komponente ein- oder aushängen

1 Montage

Der grundlegendste Prozess: Initialisierung des Komponentenzustands: Lesen des Anfangszustands und der Requisiten sowie von ComponentWillMount() und ComponentDidMount()

2. Komponentendeinstallation

Nur ​​der Zustand vor dem Unmounten von ComponentWillUnmount

2) Datenaktualisierungsprozess

1. Eigene Zustandsaktualisierung der Komponente: ShouldComponentUpdate ComponentWillUpdate Render ComponentDidUpdate

2. Zeichnung verursacht durch Änderungen in Requisiten: ComponentWillRecieveProp

s shouldComponentUpdate componentWillUpdate render ComponentDidUpdate

Um es zusammenzufassen: 2. Der Lebenszyklus einer benutzerdefinierten Komponente (ReactCompositeComponent) wird hauptsächlich über drei Zustände verwaltet: MOUNTING, RECEIVE_PROPS, UNMOUNTING,

Sie sind dafür verantwortlich, der Komponente ihren aktuellen Zustand mitzuteilen, welcher Schritt im Lebenszyklus ausgeführt werden soll und ob der Zustand aktualisiert werden kann.

mountComponent -> 🎜>

unmountComponent -> UNMOUNTING

• MONTAGE

• Eine Halterungskomponente:

• Montieren Sie die Komponente über mountComponent, initialisieren Sie die Seriennummer, das Tag und andere Parameter und beurteilen Sie, ob es sich um eine zustandslose Komponente handelt, und führen Sie entsprechende Komponenteninitialisierungsarbeiten durch, z. B. das Initialisieren von Requisiten, Kontext und anderen Parametern.

Verwenden Sie getInitialState, um den Initialisierungsstatus, die Initialisierungsaktualisierungswarteschlange und den Aktualisierungsstatus abzurufen.

mountComponent rendert Inhalte im Wesentlichen rekursiv. Aufgrund der rekursiven Natur wird „componentWillMount“ der übergeordneten Komponente vor „componentWillMount“ ihrer untergeordneten Komponente aufgerufen Der ComponentDidMount der Komponente wird nach dem ComponentDidMount der untergeordneten Komponente aufgerufen.

2) updateComponent

Wenn „componentWillReceiveProps“ vorhanden ist, führen Sie es aus. Wenn zu diesem Zeitpunkt setState in ComponentWillReceiveProps aufruft, wird kein erneutes Rendern ausgelöst, sondern

stattdessen State Die Zusammenführung wird durchgeführt . Und in componentWillReceiveProps, ShouldComponentUpdate und ComponentWillUpdate kann den aktualisierten this.state, immer noch nicht abrufen

ist der this.state, auf den zu diesem Zeitpunkt zugegriffen wird Es handelt sich immer noch um nicht aktualisierte Daten. Sie müssen this.state = nextState festlegen. Der aktualisierte this.state kann nur in Render und ComponentDIdUpdate abgerufen werden. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte React Reference Manual der PHP-Website für Chinesisch, um mehr zu erfahren)

updateComponent rendert Inhalte im Wesentlichen rekursiv. Aufgrund der rekursiven Natur wird „componentWillUpdate“ der übergeordneten Komponente vor dem componentWillUpdate der übergeordneten Komponente aufgerufen „componentDidUpdate“ wird nach dem componentDidUpdate seiner untergeordneten Komponente aufgerufen.

Hinweis: Es ist verboten, setState in ShouldComponentUpdate und ComponentWillUpdate aufzurufen, was zu einem Schleifenaufruf führt, bis der Browser nicht mehr über genügend Speicher verfügt und abstürzt.

3) unmountComponent

unmountComponent ist für die Verwaltung von ComponentWillUnmount im Lebenszyklus verantwortlich.

Wenn „componentWillUnmount“ vorhanden ist, führen Sie alle zugehörigen Parameter aus, aktualisieren Sie die Warteschlange und aktualisieren Sie den Status. Wenn „setState“ zu diesem Zeitpunkt in „componentWillUnmount“ aufgerufen wird, wird kein erneutes Rendern ausgelöst Alle Aktualisierungswarteschlangen und Aktualisierungsstatus werden auf Null zurückgesetzt, öffentliche Klassen werden gelöscht und der Komponentenschreibvorgang ist abgeschlossen.

3. Zustandslose Komponenten

Es gibt nur eine Rendermethode, es gibt keinen Instanziierungsprozess der Komponentenklasse und es wird keine Instanz zurückgegeben

Kein Zustand, kein Lebenszyklus, nur Requisiten akzeptieren und in Dom-Struktur rendern, nur zum Rendern

setState-Mechanismus

1. Asynchrone Aktualisierung von setState

Hinweis: Dies ist ein ineffizienter Ansatz und wird wahrscheinlich durch nachfolgende Vorgänge ersetzt 🎜>

1. setState realisiert die Statusaktualisierung über den Warteschlangenmechanismus. Der Warteschlangenmechanismus kann den Status effizient stapelweise aktualisieren

2. Verwenden Sie den Statuswarteschlangenmechanismus, um eine asynchrone Aktualisierung von setState zu implementieren und häufige und wiederholte Statusaktualisierungen zu vermeiden.

3 Beim Ausführen von setState wird der zu aktualisierende Status zusammengeführt und in die Statuswarteschlange stellen, ohne this.state sofort zu aktualisieren

2. SetState-Aufrufstapel

Vereinfachter Aufrufstapel:

wenn isBatchingUpdates true, dann wird die aktuelle Komponente (also die setState) in das Array dirtyComponents; andernfalls werden alle in der Warteschlange befindlichen Aktualisierungen durch BatchUpdate aktualisiert.
Dieser Artikel endet hier (wenn Sie mehr sehen möchten, gehen Sie zur Spalte

React User Manual

auf der chinesischen PHP-Website, um mehr darüber zu erfahren). Sie haben Fragen. Sie können unten eine Nachricht hinterlassen, um Fragen zu stellen.

Das obige ist der detaillierte Inhalt vonWas ist der Lebenszyklus von Reactjs? Detaillierte Einführung in den Lebenszyklus von ReactJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!