ReactJS Lifecycle

Les cycles de vie des composants de ReactJS :

  • componentWillMount() : avant le rendu
  • componentDidMount(): après le rendu
  • componentWillReceiveProps(): à la mise à jours des props ou des states
  • shouldComponentUpdate() return true or false : à la mise à jour des props ou des states, la méthode retourne par défault True
  • componentWillUpdate(): à la mise à jour avant le rendu
  • componentDidUpdate(): après le rendu, on a le nouveau DOM
  • componentWillUnmount(): Destruction d'un composant

Exemple de code TypeScript + React:

import * as React from "react";
import * as ReactDOM from 'react-dom';

interface IProps{
  name : string;
}

class Hello extends React.Component<IProps, any> {

  constructor(props: IProps) {
        super(props); 
  }
  public componentWillMount(){
    console.log("action before rendering");
  }
  public componentDidMount(){
    console.log("action after rendering");
  }
  public componentWillReceiveProps(){
    console.log("to update props or states");
  }
  // return true by default
  public shouldComponentUpdate(){
    console.log("to update props or states");
    return false; // i don't want to render
  }
  public componentWillUpdate(){
    console.log("to update before rendering");
  }
  public componentDidUpdate(){
    console.log("after rendering, we have the new DOM");
  }
  public componentWillUnmount(){
   console.log("unmount the component self");
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}