In React durchläuft jedes Mal, wenn wir eine neue Komponente erstellen, eine Reihe von Schritten, die als Lebenszyklus bezeichnet werden. React stellt uns eine Reihe von Lebenszyklusmethoden zur Verfügung, mit denen wir diese Schritte verfolgen und entsprechende Logik hinzufügen können.
Im Folgenden sind gängige Lebenszyklusmethoden aufgeführt:
- Konstrukteur()
- ComponentDidMount()
- ComponentWillUnmount()
- ComponentDidUpdate()
- ShouldComponentUpdate()
- ComponentDidCatch()
- getDerivedStateFromProps()
- getSnapshotBeforeUpdate()
- render()
constructiontor(): Wird aufgerufen, wenn die Komponente zum ersten Mal geladen wird. Während dieser Zeit können der Status, Bindungsereignisse usw. initialisiert werden.
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
name: 'John'
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
}
render() {
}
}
ComponentDidMount(): Wird aufgerufen, nachdem die Komponente zum ersten Mal gerendert wurde. Sie können hier eine AJAX-Anfrage initiieren oder einen Ereignis-Listener hinzufügen.
class MyComponent extends React.Component {
componentDidMount() {
fetch('/api/data')
.then(response => response.json())
.then(data => this.setState({
data}));
}
render() {
}
}
ComponentWillUnmount(): Wird aufgerufen, wenn die Komponente aus dem Dom entfernt werden soll. Sie können zu diesem Zeitpunkt den Timer löschen oder die Netzwerkanforderung abbrechen.
class MyComponent extends React.Component {
componentWillUnmount() {
clearTimeout(this.timeoutId);
}
render() {
}
}
ComponentDidUpdate(prevProps, PrevState): Wird aufgerufen, nachdem die Komponente erneut gerendert wurde. Hier können Sie überprüfen, ob sich Requisiten und Status geändert haben, um zu reagieren.
class MyComponent extends React.Component {
componentDidUpdate(prevProps, prevState) {
if (prevProps.data !== this.props.data || prevState.name !== this.state.name) {
console.log('数据或状态发生了改变！');
}
}
render() {
}
}
ShouldComponentUpdate(nextProps, nextState): Gibt einen booleschen Wert zurück. Wenn true, wird ein erneutes Rendern durchgeführt, andernfalls wird das Rendern übersprungen.
class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return nextProps.data !== this.props.data || nextState.name !== this.state.name;
}
render() {
}
}
getDerivedStateFromProps(nextProps, nextState): Vor jedem Rendering aufgerufen, kann hier der neue Zustand berechnet und ein neues Objekt zurückgegeben werden.
class MyComponent extends React.Component {
static getDerivedStateFromProps(nextProps, nextState) {
const newState = {
};
if (nextProps.data !== this.props.data) {
newState.data = nextProps.data;
}
return newState;
}
render() {
}
}
getSnapshotBeforeUpdate(prevProps, prevState): Wird vor ComponentDidUpdate aufgerufen. Sie können zu diesem Zeitpunkt einen Wert zurückgeben und diesen Wert dann in ComponentDidUpdate verwenden.
class MyComponent extends React.Component {
getSnapshotBeforeUpdate(prevProps, prevState) {
return prevProps.data !== this.props.data;
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
console.log('数据已经改变了！');
}
}
render() {
}
}
render(): Die Hauptaufgabe der Komponente besteht darin, ein JSX-Element zurückzugeben.
Der React-Lebenszyklus ist ein sehr wichtiges Thema. Kenntnisse in Lebenszyklusmethoden können den Zustand und das Verhalten von Komponenten besser verwalten und optimieren. Im Folgenden finden Sie einige grundlegende Konzepte und Verwendungsmethoden für die Verwendung des Lebenszyklus in React. Bitte üben Sie es!