Cycle d’un composant React

Un composant à état propose beaucoup d’avantages, il est possible de faire jouer avec un paquet d’éléments tout au long de la vie du composant. Voici ce qu’il est possible de faire dans les grandes lignes, par la suite nous implémenterons régulièrement ces fonctions et API dans nos futurs composants en fonction de nos besoins.

Il existe d’autres fonctions que celles proposées ci-dessus, mais ce sont celles de base que l’on retrouve quasi systématiquement dans chaque composant. Les évolutions de React permettent également d’avoir de nouvelles API et fonctions et d’optimiser celles-ci.

constructor

Comme son nom l’indique c’est le constructeur de la class du composant, celui-ci permet de binder des fonctions dès le départ, elle permet également d’initialiser le state.

constructor(props) {
  super(props);
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

Si vous n’avez pas besoin de binder vos fonctions, vous n’êtes pas obligé de d’avoir un constructeur. Si votre constructeur ne contient que votre state, vous pouvez le déclarer plus simplement comme dans l’exemple précédent des buttons.

Attention: vous ne pouvez pas utiliser setState dans le constructeur, si vous en avez vraiment besoin il faut passer par la fonction componentDidMount() pour y répondre.

componentDidMount

Cette fonction est appelée directement après avoir ‘monté’ le composant; elle permet par exemple d'exécuter des fonctions d’initialisation quelconques au moment où le composant est monté.

Dans le cycle de vie du composant, il va être monté une première fois au moment ou celui-ci va être sollicité pour la première fois. Par conséquence il sera également démonté au moment où vous allez fermer la page par exemple.

componentDidUpdate

Cette fonction va être appelée au moment où le composant va être actualisé, soit via la fonction setState, soit par un changement des props. Elle peut être utilisée de cette façon et même récupérer les états des props.

componentDidUpdate(prevProps, prevState){
	//Updated
}

Vous pouvez récupérer l’état précédent le changement ainsi que celui qui va être implémenté.

Attention: il est impossible d’utiliser la fonction setState dans cette fonction car celle-ci vient générer une boucle infinie.

componentWillUnmount

Cette fonction va être appelée au moment où le composant va être retiré du DOM, l'intérêt ici est par exemple de supprimer les fonctions d’écoute si vous en utilisez comme addEventListener qui, contrairement au composant, continuent de fonctionner si vous ne les supprimez pas. Cela provoquera systématiquement une erreur au moment où ces fonctions essayeront de s’exécuter par la suite.