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