Méthodes de cycle de vie en React

Introduction

Dans le monde de React, les méthodes de cycle de vie sont des événements distincts qui surveillent les changements à différents moments du cycle de vie d'un composant. En règle générale, le cycle d'un composant suit cet ordre :

Montage - Intégration du composant dans le DOM pour la première fois.
Mise à jour - Modification d'un composant existant.
Gestion des erreurs - Capture des erreurs rencontrées lors du rendu d'un composant.
Démontage - Retrait d'un composant du DOM.

Montage d'un composant

Après la création d'un composant, lorsque render() l'inscrit pour la première fois dans le DOM, il est alors monté grâce à la méthode componentDidMount(), qui s'exécute une fois le rendu terminé.

import React from "react";
class App extends React.Component {
  componentDidMount() {
    console.log("Le composant a été monté !");
  }
  render() {
    console.log("Rendu...");
    return (
      
      
    );
  }
}

En sortie, vous devez obtenir :

Rendu...
Le composant a été monté !

Mise à jour d'un composant

Lorsque des modifications sont apportées à un composant, généralement à son état, le composant entre dans la phase de mise à jour, qui est gérée par la méthode componentDidUpdate(). Prenons l'exemple commun d'un Compteur, où les méthodes increase() et decrease() changent l'état du compteur. componentDidUpdate() s'exécute immédiatement après l'une de ces méthodes :

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.increment = () => this.setState({ count: this.state.count + 1 });
    this.decrement = () => this.setState({ count: this.state.count - 1 });
  }
  componentDidMount() {
    console.log('Le composant a été monté.');
  }
  componentDidUpdate() {
    console.log('Le composant a été mis à jour. Le compteur est maintenant : ' + this.state.count + '.');
  }
  render() {
    console.log('Rendu...');
    return (
      
        Compteur : {this.state.count}
        
        
      
    );
  }
}

Si nous cliquons sur le bouton « + » deux fois, notre sortie sera :

Rendu...
Le composant a été monté.
Rendu...
Le composant a été mis à jour. Le compteur est maintenant : 1.
Rendu...
Le composant a été mis à jour. Le compteur est maintenant : 2.

Gestion des erreurs dans les composants

Avant React 16, il n'y avait pas de mécanisme pour gérer les erreurs produites durant la phase de rendu d'un arbre de composants. En cas d'erreur : - L'application entière se bloquait, et tous les composants s'unmountaient. - Un rapport d'erreur remplaçait l'interface utilisateur.

Cela a conduit à l'introduction des méthodes suivantes : - static getDerivedStateFromError(error) pour renvoyer un état mis à jour permettant d'afficher une interface utilisateur de secours. - componentDidCatch(error, errorInfo) pour enregistrer des informations d'erreur dans la console, incluant une traçabilité des composants jusqu'à la source de l'erreur.

Voici un exemple d'une classe composant qui utilise ces méthodes :

import React from "react";
class CompteurErreurs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = () => this.setState({count: this.state.count + 1})
    this.decrement = () => this.setState({count: this.state.count - 1})
  }
  render() {
    if(this.state.count === 3) throw new Error("Échec !")
    return (
      
        Compteur : {this.state.count}
        
        
      
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }
  getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error
    };
  }
  componentDidCatch(error, errorInfo) {
    console.log(error.name + ": " + error.message); // Sortie : Error: Échec !
  }
  render() {
    if(this.state.hasError) {
      return (
        
          Oh non ! Quelque chose ne va pas !
        
      );
    }
    return (
      
        
      
    );
  }
}

Note : getDerivedStateFromError() et componentDidCatch() ne gèrent que les erreurs liées à leurs composants enfants, ils ne sont pas capables de traiter les erreurs liées aux gestionnaires d'événements.

Démontage d'un composant

Lorsqu'un composant est démonté, on considère qu'il a atteint la fin de son cycle de vie au sein de l'application React. La méthode associée est componentWillUnmount(), qui s'exécute lorsque React anticipe que son composant hôte sera détruit.

Revenons à l'exemple précédent, lorsque le composant CompteurErreurs jette une erreur lorsque son état égale 3, il est alors détruit et remplacé par une nouvelle interface utilisateur à l'intérieur de son composant parent, App.

import React from "react";
class CompteurErreurs extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = () => this.setState({count: this.state.count + 1})
    this.decrement = () => this.setState({count: this.state.count - 1})
  }
  componentWillUnmount() {
    console.log("Le compteur a été démonté !"); // Sortie : Le compteur a été démonté !
  }
  render() {
    if(this.state.count === 3) throw new Error("Échec !")
    return (
      
        Compteur : {this.state.count}
        
        
      
    );
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null
    };
  }
  getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error
    };
  }
  componentDidCatch(error, errorInfo) {
    console.log(error.name + ": " + error.message); // Sortie : Error: Échec !
  }
  render() {
    if(this.state.hasError) {
      return (
        
          Oh non ! Quelque chose ne va pas !
        
      );
    }
    return (
      
        
      
    );
  }
}