ReactJS - Cycle de vie des composants

Dans ce chapitre, nous aborderons les méthodes de cycle de vie des composants.

Méthodes du cycle de vie

  • componentWillMount est exécuté avant le rendu, à la fois côté serveur et côté client.

  • componentDidMountest exécuté après le premier rendu uniquement côté client. C'est là que les requêtes AJAX et les mises à jour DOM ou d'état doivent avoir lieu. Cette méthode est également utilisée pour l'intégration avec d'autres frameworks JavaScript et toutes les fonctions avec une exécution retardée telles quesetTimeout ou setInterval. Nous l'utilisons pour mettre à jour l'état afin de pouvoir déclencher les autres méthodes du cycle de vie.

  • componentWillReceivePropsest appelée dès que les accessoires sont mis à jour avant qu'un autre rendu ne soit appelé. Nous l'avons déclenché à partir desetNewNumber lorsque nous avons mis à jour l'état.

  • shouldComponentUpdate devrait revenir true ou falsevaleur. Cela déterminera si le composant sera mis à jour ou non. Ceci est réglé surtruepar défaut. Si vous êtes sûr que le composant n'a pas besoin d'être rendu aprèsstate ou props sont mis à jour, vous pouvez revenir false valeur.

  • componentWillUpdate est appelé juste avant le rendu.

  • componentDidUpdate est appelé juste après le rendu.

  • componentWillUnmountest appelé après que le composant est démonté du dom. Nous démontons notre composant enmain.js.

Dans l'exemple suivant, nous allons définir la valeur initiale statedans la fonction constructeur. lesetNewnumber est utilisé pour mettre à jour le state. Toutes les méthodes de cycle de vie se trouvent dans le composant Content.

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);

Après le rendu initial, nous obtiendrons l'écran suivant.