Que sont les méthodes de cycle de vie des composants dans React JS ??

Comme nous tous, les composants React prennent aussi naissance, grandissent et meurent!

(Habilelabs) (7 décembre 2020)

Par Payal Mittal

méthodes de cycle de vie des composants dans reactjs
Méthodes de cycle de vie des composants dans React.js

Chaque composant de classe React passe par une série de » méthodes du cycle de vie ». Fondamentalement, tout dans React est constitué de composants ou dune partie des composants.

Ces composants sont soumis à un certain cycle de vie, presque comme celui de nimporte quelle créature vivante sur terre. Ils naissent, grandissent, puis meurent enfin. La phase au cours de laquelle ils naissent sappelle le montage, le moment où ils grandissent sappelle la mise à jour, et la dernière phase de la mort sappelle le démontage.

Lensemble de ce processus est appelé «cycle de vie des composants». Pour chacune de ces phases, React.js rend certaines méthodes intégrées appelées méthodes de cycle de vie qui contrôlent le comportement des composants au sein dune application.

Dans ce blog, nous allons parcourir ce cycle de vie et obtenir pour connaître ces méthodes de cycle de vie –

Que sont les méthodes de cycle de vie des composants?

Les méthodes de cycle de vie des composants sont divisées en trois phases différentes, comme-

  • Montage
  • Mise à jour
  • Démontage

Lensemble du cycle de vie des composants peut être compris par cette simple illustration visuelle –

Diagramme du cycle de vie des composants

Nous allons maintenant discuter de chacune des phases et de leurs méthodes en détail. Allons-y alors –

✔ Montage des méthodes de cycle de vie

Après avoir terminé le composant initialisation, le montage du composant commence dans lequel le composant est créé et inséré dans le DOM.

Ici, nous allons discuter des méthodes de cycle de vie les plus couramment utilisées-

1. constructor ()

Le constructor() est appelé avant le début du montage et est essentiellement utilisé pour servir ces deux buts-

Au lieu dutiliser setState(), vous pouvez directement attribuer létat initial à this.state() dans la méthode constructor. Voici comment nous pouvons définir notre état-

constructor(props) {
super(props);this.state = { count: 0 };
this.handleClick = this.handleClick.bind(this);
console.log("Constructor!");
}

2. render ()

La méthode suivante est la render()! Il monte le composant sur le DOM et les rend dans linterface utilisateur. Cette méthode est appelée pour examiner les attributs this.state et this.props chaque fois quil y a une variation dans les state ou props.

render est la méthode la plus couramment utilisée de tous dans React. Si vous voulez rendre des éléments dans le DOM, alors render() est la méthode à attendre car vous pouvez les écrire ici.

À chaque appel, il peut renvoyer de nombreux types, cest-à-dire des chaînes, des nombres, des tableaux, des fragments, des booléens ou des éléments null value, portal ou React. Quelques exemples sont donnés ici –

class MyComponent extends React.Component {
render() {//return string
return "Hello!!"//return null value in case you don"t want to render anything
return null//return fragments
return
Hello

Friends

//return arrays
return [
Hello
,
World

]; }
}

Remarque : Si la méthode componentShouldMount renvoie booléen false, alors la méthode de rendu ne sera pas évoquée.

3. componentDidMount ()

Cette méthode est appelée immédiatement après linsertion du composant dans le DOM via la méthode render . Il n’est appelé qu’une seule fois dans un cycle de vie.

  • Si vous souhaitez configurer des abonnements, c’est le meilleur endroit pour le faire. Mais vous devrez vous désabonner dans componetWillUnmount().
  • Cest également un bon endroit pour instancier une requête réseau si vous avez besoin de charger des données à distance endpoint.
  • Vous pouvez même appeler setState() ici. Bien que cela déclenche à nouveau un rendu, vous ne verrez au moins létat intermédiaire. Cependant, vous devez être prudent lors de son utilisation car cela entraîne des problèmes de performances. En fait, vous devez attribuer létat initial dans la méthode constructor(), si cela vous convient. Mais cette approche est pratique lorsque vous devez mesurer un nœud DOM avant de rendre quelque chose qui dépend de sa taille.

✔ Mise à jour des méthodes de cycle de vie

Contrairement au Montage phase qui ne se produit quune seule fois lors du montage du composant, la phase de mise à jour peut se produire plusieurs fois.

Chaque fois quil y a un changement dans les accessoires / létat du composant à mettre à jour, un minuteur appelle pour que render et componentDidupdate acquittent, mettent à jour et rendent le changement, la phase de mise à jour entre en jeu.

1. static getDerivedStateFromProps ()

Cest la première méthode qui est appelée dans la phase de cycle de vie de mise à jour. Elle peut être appelée plusieurs fois car elle est appelée chaque fois que la méthode render est lancée. Il est donc évident quelle est appelée pendant les phases de montage et de mise à jour.

Cette méthode nest pas très courante et rarement utilisée dans des cas spécifiques, par exemple lorsque létat du composant varie avec les changements daccessoires au fil du temps. Comme son nom lindique, il dérive létat des accessoires.

2. shouldComponentUpdate ()

Cette méthode est appelée lorsque le composant est sur le point de refaire le rendu. Il détermine si les modifications actuelles de states / props affectent la sortie du composant. Il nest utilisé que comme moyen doptimisation des performances et nous fait savoir si le composant est mis à jour ou non, ce qui est exprimé par Boolean true ou false valeurs. Par défaut, il renvoie true.

Si

shouldComponentUpdate() renvoie false valeur, cela signifie que vous dites à React dignorer cette mise à jour et par conséquent, les méthodes render et componentDidUpdate ne seront pas appelées.

Fonctionnement de la méthode shouldComponentUpdate

Cependant, vous pouvez également éviter les rendus inutiles en utilisant

React.PureComponent qui vous permet de comparer le nouveau et lancien state / props et vous empêche dignorer toute mise à jour nécessaire.

3. render ()

Vient ensuite render. Lappel ou non dépend de la valeur renvoyée par shouldComponentUpdate. Il ne se déclenchera que dans le cas où true est renvoyé.

4. getSnapshotBeforeUpdate ()

Après lappel de render ,

getSnapshotBeforeUpdate vient ensuite. Elle nest pas couramment utilisée mais est très pratique dans certains cas spécifiques, par exemple lorsque vous avez besoin daccéder à certaines informations du DOM et de les modifier, juste après leur mise à jour.

Cette méthode permet au composant de capturer des informations (hauteur de défilement) du DOM afin quelles puissent être ajustées plus tard (après la mise à jour). Cependant, vous devez comprendre que la hauteur de défilement capturée ici indique la hauteur avant sa mise à jour vers DOM.

Nous pouvons passer prevState et prevProps comme arguments, comme indiqué ici –

getSnapshotBeforeUpdate(prevProps, prevState) {return null;}

5. componentDidUpdate ()

Cette méthode est appelée immédiatement après la mise à jour et le rendu du composant. Il reçoit les paramètres prevState et prevProps et peut également accéder à létat ou aux accessoires nouvellement modifiés.

Cependant, il est fortement conseillé de ne jamais définir directement létat dans cette fonction, sinon cela déclenchera encore render et componentDidUpdate.

Grâce à cette méthode, nous arrivons à calculer la scrollHeight différence entre ce quelle était avant après avoir été mise à jour.

Ce nest quun cas dutilisation, là en sont plusieurs autres comme –

👉 Pour récupérer des données du serveur

👉 Pour accéder aux nœuds DOM du composant React

Pour obtenir des détails sur ses cas dutilisation , consultez la documentation officielle –

React.Component – React

Cette page contient une référence API détaillée pour la classe de composant React définition. Il suppose que vous « êtes familier avec…

reactjs.org

✔ Démontage des méthodes de cycle de vie

Cest la dernière phase au cours de laquelle un composant de réaction passe par là où il est démonté du DOM et détruit. Il ny a quune seule méthode de cycle de vie dans cette phase.

1. componentWillUnmount ()

componentWillUnmount La méthode est appelée en premier lors de la phase de démontage, juste avant la destruction du composant.Cest ici que vous pouvez effectuer nimporte quelle méthode de nettoyage, essentiellement en annulant les requêtes réseau, en invalidant les minuteries ou en nettoyant les abonnements indésirables créés avec la méthode componentDidMount .

Résumé:

Il existe dautres méthodes qui sont invoquées au cas où une erreur serait générée par un composant descendant, ces méthodes sont appelées méthodes de gestion des erreurs du cycle de vie. Vous les trouverez ici .

Cétait tous des codeurs !! Jespère que vous comprendrez mieux les méthodes de cycle de vie du composant React grâce à ce blog. Revenez bientôt à vous avec un autre blog perspicace.

Till alors, bonne lecture !! 🙃

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *