Lebenszyklus der Reaktion - Verschiedene Phasen des Reaktionslebenszyklus mit Beispielen

Einführung in den React Lifecycle

Da wir wissen, dass Komponenten grundlegende Reaktionsbausteine ​​sind, ist es wichtig, die verschiedenen Phasen im Lebenszyklus einer Reaktionskomponente zu kennen. In diesem Artikel werden die verschiedenen Ereignisse und Methoden beschrieben, die am Lebenszyklus einer Komponente beteiligt sind. Außerdem werden wir einige Beispiele behandeln, die ein klares Bild des Lebenszyklus der React-Komponenten vermitteln.

Phasen des Reaktionslebenszyklus

Der Lebenszyklus von Komponenten ist definiert als die Folge von Methoden, die in verschiedenen Phasen einer Komponente aufgerufen werden. Die folgenden Phasen sind am Lebenszyklus einer Reaktionskomponente beteiligt:

1. Initialisierung

In dieser Phase muss der Entwickler die Eigenschaften und den Anfangszustand der Komponente definieren. Dies erfolgt im Konstruktor der Komponente. Der folgende Code zeigt die Initialisierungsphase einer Reaktionskomponente:

Code:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Montage

Das Mounten ist die Phase des Reaktionslebenszyklus, die nach Abschluss der Initialisierung erfolgt. Das Mounten erfolgt, wenn die Komponente im DOM-Container platziert und auf einer Webseite gerendert wird. Die Montagephase umfasst zwei Methoden:

• compnentWillMount () : Diese Methode wird unmittelbar vor dem Platzieren der Komponente in DOM aufgerufen, dh, diese Funktion wird unmittelbar vor der ersten Ausführung der Renderfunktion aufgerufen.
• componentDidMount () : Diese Methode wird direkt nach dem Platzieren der Komponente in DOM aufgerufen, dh, diese Funktion wird direkt nach dem Ausführen der Renderfunktion aufgerufen. Zum aller ersten mal.

Aus dem Namen der beiden oben genannten Methoden haben wir die Bedeutung der Schlüsselwörter "Will" und "Did" verstanden. Es ist jetzt klar, dass "Wille" vor einem bestimmten Ereignis und "getan" nach einem bestimmten Ereignis verwendet wird.

3. Aktualisierung

Die Aktualisierung ist eine Phase, in der der Status und die Eigenschaften zum Zeitpunkt der Initialisierung geändert werden, falls dies nach einigen Benutzerereignissen erforderlich ist. Die folgenden Funktionen werden während der Aktualisierungsphase aufgerufen:

• componentWillReceiveProps (): Diese Funktion ist unabhängig vom Komponentenzustand. Diese Methode wird aufgerufen, bevor eine Komponente, die in DOM eingebunden ist, ihre Requisiten neu zugewiesen bekommt. Die Funktion akzeptiert neue Requisiten, die identisch oder von den ursprünglichen Requisiten verschieden sein können. In diesem Schritt können hauptsächlich einige Pre-Rendering-Prüfungen angewendet werden.
• shouldComponentUpdate (): Manchmal ist es wünschenswert, die neuen Requisiten nicht auf der Ausgabeseite anzuzeigen . Zu diesem Zweck gibt diese Methode false zurück, dh, die neu gerenderten Requisiten sollten nicht auf der Ausgabeseite angezeigt werden.
• componentWillUpdate (): Diese Funktion wird aufgerufen, bevor eine Komponente erneut gerendert wird. Dies ist die Methode, die einmal aufgerufen wird, bevor die Renderfunktion nach der Aktualisierung ausgeführt wird.
• componentDidUpdate (): Diese Funktion wird aufgerufen, nachdem eine Komponente neu gerendert wurde. Dies ist die Methode, die einmal aufgerufen wird, nachdem die Renderfunktion nach der Aktualisierung ausgeführt wurde.

4. Demontage

Dies ist die letzte Phase im Komponentenlebenszyklus. In dieser Phase wird eine Komponente vom DOM-Container getrennt . Die folgende Methode fällt in diese Phase.

• componentWillUnmount (): Diese Funktion wird aufgerufen, bevor eine Komponente endgültig vom DOM-Container getrennt wird. Diese Methode wird aufgerufen, wenn eine Komponente vollständig von der Seite entfernt wurde und das Ende ihres Lebenszyklus angezeigt wird.

Beispiel für den Reaktionslebenszyklus

Hier sehen wir einige Codebeispiele, die den Lebenszyklus einer Reaktionskomponente zeigen.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Wenn das obige Programm zum ersten Mal ausgeführt wird, wird die folgende Ausgabe auf der Webseite angezeigt.

Wenn Sie auf Hier klicken, ändert sich der Text wie folgt:

Jetzt können Sie auf der Konsole die Reihenfolge der aufgerufenen Methoden sehen. Die Konsole zeigt die folgende Ausgabe an:

Nach dem Klicken auf den Bildschirm wird erneut gerendert und Folgendes in der Konsole angezeigt:

Die obige Konsolenausgabe bietet ein klares Verständnis der React Lifecycle-Methoden, die während des Lebenszyklus der React-Komponente aufgerufen werden.

Fazit

Nachdem Details zu verschiedenen Phasen des Reaktionslebenszyklus behandelt wurden, wird deutlich, dass es Lebenszyklusmethoden gibt, die automatisch aufgerufen werden. Diese Lebenszyklusmethoden in verschiedenen Phasen einer Komponente geben uns die Freiheit, benutzerdefinierte Ereignisse auszuführen, wenn eine Komponente erstellt, aktualisiert oder zerstört wird. Darüber hinaus ermöglichen uns diese Methoden, Requisiten und Statusänderungen zu handhaben sowie Bibliotheken von Drittanbietern einfach zu integrieren.

Empfohlene Artikel

Dies ist eine Anleitung zum React Lifecycle. Hier diskutieren wir Phasen des Reaktionslebenszyklus wie Initialisierung, Mounten, Aktualisieren und Unmounten zusammen mit dem Beispiel. Sie können sich auch die folgenden Artikel ansehen, um mehr zu erfahren -

1. Reagiere einheimisch vs Reagiere
2. Agiler Lebenszyklus
3. ITIL-Lebenszyklus
4. Java-Bereitstellungstools
5. Anleitung zu Button in React Native