Comment comprendre les méthodes de cycle de vie d'un composant dans ReactJS

Dans cet article, nous allons explorer les méthodes de cycle de vie de ReactJS. Mais avant de passer aux différentes méthodes de cycle de vie de React, nous devons comprendre ce que c'est.

Comme nous le savons, tout dans ce monde suit un cycle (disons les humains ou les arbres). Nous naissons, grandissons, puis mourons. Presque tout suit ce cycle dans sa vie, et les composants React le font également. Les composants sont créés (montés sur le DOM), grandissent par mise à jour, puis meurent (démontés sur DOM). C'est ce qu'on appelle le cycle de vie d'un composant.

React propose différentes méthodes de cycle de vie à différentes phases de la vie d'un composant. React appelle automatiquement la méthode responsable en fonction de la phase dans laquelle se trouve le composant. Ces méthodes nous donnent un meilleur contrôle sur notre composant et nous pouvons les manipuler en utilisant ces méthodes.

À l'heure actuelle, nous savons ce que sont les méthodes de cycle de vie et pourquoi elles sont importantes. Alors, quelles sont ces différentes méthodes? Jetons un œil à eux.

Méthodes du cycle de vie

Le cycle de vie d'un composant est globalement classé en quatre parties:

  • initialisation
  • montage
  • mise à jour, et
  • démontage .

Discutons des différentes méthodes de cycle de vie disponibles à ces différentes phases (c.-à-d. Initialisation, montage, mise à jour et démontage).

Initialisation

C'est la phase dans laquelle le composant va commencer son voyage en configurant l'état (voir ci-dessous) et les accessoires. Cela se fait généralement dans la méthode du constructeur (voir ci-dessous pour mieux comprendre la phase d'initialisation).

class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }

Montage

Le nom est explicite. Le montage est la phase dans laquelle notre composant React se monte sur le DOM (c'est-à-dire qu'il est créé et inséré dans le DOM).

Cette phase entre en scène une fois la phase d'initialisation terminée. Dans cette phase, notre composant effectue le premier rendu. Les méthodes disponibles dans cette phase sont:

1. composantWillMount ()

Cette méthode est appelée juste avant qu'un composant se monte sur le DOM ou que la méthode de rendu soit appelée. Après cette méthode, le composant est monté.

Remarque: vous ne devez pas effectuer d'appels d'API ou de modifications de données à l'aide de this.setstate dans cette méthode car il est appelé avant la méthode de rendu. Ainsi, rien ne peut être fait avec le DOM (c'est-à-dire mettre à jour les données avec la réponse API) car il n'a pas été monté. Par conséquent, nous ne pouvons pas mettre à jour l'état avec la réponse de l'API.

2. componentDidMount ()

Cette méthode est appelée après le montage du composant sur le DOM. Comme componentWillMount, il est appelé une fois dans un cycle de vie. Avant l'exécution de cette méthode, la méthode render est appelée (c'est-à-dire que nous pouvons accéder au DOM). Nous pouvons faire des appels API et mettre à jour l'état avec la réponse API.

Jetez un œil pour comprendre ces méthodes de montage:

class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( 

Hello mounting methods!

); } }

Mise à jour

C'est la troisième phase par laquelle passe notre composant. Après la phase de montage où le composant a été créé, la phase de mise à jour entre en scène. C'est là que l'état du composant change et, par conséquent, le re-rendu a lieu.

Dans cette phase, les données du composant (état et accessoires) sont mises à jour en réponse aux événements utilisateur tels que les clics, la saisie, etc. Cela entraîne le re-rendu du composant. Les méthodes disponibles dans cette phase sont:

  1. shouldComponentUpdate ()

Cette méthode détermine si le composant doit être mis à jour ou non. Par défaut, il renvoie true. Mais à un moment donné, si vous souhaitez rendre à nouveau le composant sous certaines conditions, la méthode shouldComponentUpdate est le bon endroit.

Supposons, par exemple, que vous souhaitiez ne refaire le rendu de votre composant qu'en cas de changement d'accessoire, puis utilisez la puissance de cette méthode. Il reçoit des arguments comme nextProps et nextState qui nous aident à décider s'il faut refaire le rendu en faisant une comparaison avec la valeur actuelle de prop.

2. componentWillUpdate ()

Comme les autres méthodes, son nom est également explicite. Il est appelé avant que le nouveau rendu du composant n'ait lieu. Il est appelé une fois après la méthode ' shouldComponentUpdate '. Si vous souhaitez effectuer un calcul avant de refaire le rendu du composant et après la mise à jour de l'état et de l'accessoire, c'est le meilleur endroit pour le faire. Comme la méthode 'shouldComponentUpdate', elle reçoit également des arguments comme nextProps et nextState.

3. ComponentDidUpdate ()

Cette méthode est appelée juste après le re-rendu du composant. Une fois le nouveau composant (mis à jour) mis à jour sur le DOM, la méthode ' componentDidUpdate ' est exécutée. Cette méthode reçoit des arguments tels que prevProps et prevState.

Jetez un œil pour mieux comprendre les méthodes de mise à jour:

class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( 

Hello Mounting Lifecycle Methods!

); } }

Démontage

Il s'agit de la dernière phase du cycle de vie du composant. Comme son nom l'indique clairement, le composant est démonté du DOM dans cette phase. La méthode disponible dans cette phase est:

1. composantWillUnmount ()

Cette méthode est appelée avant le démontage du composant. Avant la suppression du composant du DOM, ' componentWillUnMount' s'exécute. Cette méthode indique la fin du cycle de vie du composant.

Voici une représentation organigramme des méthodes du cycle de vie:

That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.

Thanks!