ReactJS - Komponentenlebenszyklus

In diesem Kapitel werden Methoden zum Komponentenlebenszyklus erläutert.

Lebenszyklusmethoden

• componentWillMount wird vor dem Rendern sowohl auf der Server- als auch auf der Clientseite ausgeführt.

• componentDidMountwird nach dem ersten Rendern nur auf der Client-Seite ausgeführt. Hier sollten AJAX-Anforderungen und DOM- oder Statusaktualisierungen erfolgen. Diese Methode wird auch für die Integration mit anderen JavaScript-Frameworks und allen Funktionen mit verzögerter Ausführung verwendet, zsetTimeout oder setInterval. Wir verwenden es, um den Status zu aktualisieren, damit wir die anderen Lebenszyklusmethoden auslösen können.

• componentWillReceivePropswird aufgerufen, sobald die Requisiten aktualisiert wurden, bevor ein anderes Render aufgerufen wird. Wir haben es ausgelöst vonsetNewNumber als wir den Zustand aktualisiert haben.

• shouldComponentUpdate sollte zurückkehren true oder falseWert. Dadurch wird festgelegt, ob die Komponente aktualisiert wird oder nicht. Dies ist auf eingestellttruestandardmäßig. Wenn Sie sicher sind, dass die Komponente danach nicht mehr gerendert werden mussstate oder props aktualisiert werden, können Sie zurückkehren false Wert.

• componentWillUpdate wird kurz vor dem Rendern aufgerufen.

• componentDidUpdate wird direkt nach dem Rendern aufgerufen.

• componentWillUnmountwird aufgerufen, nachdem die Komponente vom Dom abgemeldet wurde. Wir nehmen unsere Komponente in abmain.js.

Im folgenden Beispiel setzen wir die Initiale statein der Konstruktorfunktion. DassetNewnumber wird verwendet, um die zu aktualisieren state. Alle Lebenszyklusmethoden befinden sich in der Inhaltskomponente.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Nach dem ersten Rendern wird der folgende Bildschirm angezeigt.