Es sind drei Kategorien von Lifecycle-Methoden zu unterscheiden:
- Mounting – Bereitstellen,
- Updating – Aktualisieren
- Unmounting – Aufheben der Bereitstellung.
In diesem Artikel geht es um die erste Kategorie: Bereitstellen (Mounting) von Lebenszyklusmethoden.
Eine Komponente wird beim ersten Rendern „gemountet“.
Dies ist der Fall, wenn Mounting Lifecycle Methods (Mounting-Lebenszyklus) aufgerufen werden.
Es gibt drei Methoden für den Mounting-Lebenszyklus:
- componentWillMount
- render
- componentDidMount
Wenn eine Komponente bereitgestellt wird (mounts), werden diese drei Methoden automatisch der Reihe nach aufgerufen.
1. componentWillMount
Die erste Methode für den Mounting-Lebenszyklus heißt componentWillMount.
Wenn eine Komponente zum ersten Mal gerendert wird, wird componentWillMount direkt vor dem Rendern aufgerufen.
import React from 'react';import ReactDOM from 'react-dom';
export class Example extends React.Component {
componentWillMount() {
alert('component is about to mount!');
}
render() {
return <h1>Hello world</h1>;
}
}
ReactDOM.render(
<Example />,
document.getElementById('app')
);
setTimeout(() => {
ReactDOM.render(
<Example />,
document.getElementById('app')
);
}, 2000);
Schauen Sie sich das obenstehende Beispiel an.
Erläuterung :
In den Zeilen
ReactDOM.render(
<Example />,
document.getElementById('app')
);
wird <Example /> zum ersten Mal gerendert. Die Mounting-Periode von <Example/> beginnt.
<Example/> ruft die erste Mounting-Lifecycle-Methode, componentWillMount, auf.
componentWillMount wird ausgeführt und eine Warnung wird auf dem Bildschirm angezeigt:
componentWillMount() {
alert('component is about to mount!');
}
Nach dem Abschluss von componentWillMount ruft <Example /> die zweite Methode für den Mounting-Lebenszyklus auf: render.
render() {
return <h1>Hello world</h1>;
}
<h1> Hallo Welt </ h1> erscheint auf dem Bildschirm
Zwei Sekunden später wird <Example /> erneut gerendert.
setTimeout(() => {
ReactDOM.render(
<Example />,
document.getElementById('app')
);
}, 2000);
componentWillMount wird dieses Mal jedoch NICHT aufgerufen, da das Mounten von Lifecycle-Ereignissen nur beim ersten Rendern einer Komponente ausgeführt wird.
In componentWillMount kann this.setState aufgerufen werden!
Nachstehendes Coding ist ein Beispiel für this.setState in componentWillMount. Wie wird hier <MyExample /> <h1> Hallo Welt </ h1> gerendert ?
import React from 'react';
import ReactDOM from 'react-dom';
export class MyExample extends React.Component {
constructor(props) {
super(props);
this.state = { text: '' };
}
componentWillMount() {
this.setState({ text: 'Hello world' });
}
render() {
return <h1>{this.state.text}</h1>;
}
}
ReactDOM.render(
<MyExample />,
document.getElementById('app')
);
2. Render
Rendern ist eine Lebenszyklusmethode !
Wie fügt sich das rendern in den Lebenszyklus ein ?
Immer wenn eine Komponente bereitgestellt wird, wird componentWillMount zuerst aufgerufen, gefolgt von render, gefolgt von componentDidMount.
Das Rendern gehört zu zwei Kategorien:
Mounten von Lebenszyklusmethoden und Aktualisieren von Lebenszyklusmethoden.
3. componentDidMount
Die endgültige Methode für den Lebenszyklus der Bereitstellung heißt componentDidMount.
Wenn eine Komponente zum ersten Mal gerendert wird, wird componentDidMount direkt aufgerufen, nachdem der HTML-Code aus dem Rendern vollständig geladen wurde. Nachstehend ein kleines Beispiel für componentDidMount.
import React from 'react';
export class Example extends React.Component {
componentDidMount() {
alert('component just finished mounting!');
}
render() {
return <h1>Hello world</h1>;
}
}
componentDidMount wird sehr viel genutzt !
Wenn die React-App AJAX verwendet, um initial Daten von einer API abzurufen, ist componentDidMount der Ort, an dem dieser AJAX-Aufruf ausgeführt wird. Im Allgemeinen ist componentDidMount ein guter Ort, um eine React-App mit externen Anwendungen wie Web-APIs oder JavaScript-Frameworks zu verbinden. componentDidMount ist auch normalerweise der Ort, an dem Timer mit setTimeout oder setInterval festgelegt werden.
Wenn das noch zu wenig konkret klingt, keine Sorge, wir werden die Lebenszyklusmethoden und ihre Praxis-Anwendung in weiteren Artikeln noch näher betrachten.
Kommentare