Cycle de vie des composants React : Que devez-vous savoir ? [2022]

Dans React, l'application est divisée en éléments les plus petits possibles appelés composants. Les composants peuvent être de présentation ou de conteneur.

Lorsque nous parlons de composants de présentation, ils n'ont aucune logique. Ils sont intégrés à l'intérieur des composants ; il n'a que l'interface utilisateur.

Les composants de conteneur sont ceux qui utilisent des composants de présentation et ont une logique métier dans le composant. Ces composants doivent souvent conserver des objets d'état locaux pour réaliser l'un des nombreux cas d'utilisation dont ils pourraient être responsables. Ces composants utilisent des composants de présentation en tant que composants enfants et transmettent des données à l'aide de divers accessoires.

React vous permet d'avoir des composants de classe ou fonctionnels. Un modèle répandu utilisé dans l'écosystème de réaction est que le composant de présentation est un type de composant fonctionnel et que les composants de conteneur sont de type classe.

Le cycle de vie de réaction montre le processus exact par lequel les composants passent et la raison derrière le cycle de vie des composants de réaction .

Composants fonctionnels

Ce sont ceux qui n'ont pas d'état, et seules les manipulations utilisant les accessoires sont effectuées.

Toutes les méthodes de cycle de vie des composants ou le setState ne peuvent pas être utilisés ou accessibles à l'intérieur de ces composants.

Paiement : Réagissez aux idées de projets

Composants de classe

Ces composants peuvent avoir un état local et ils ont accès aux méthodes de cycle de vie et à setState .

Un composant de classe typique dans react ressemble à : -

Le cycle de vie des composants comporte trois phases : -

1. Montage
2. Mise à jour
3. Démontage

Montage

Lorsqu'un composant est créé et inséré dans DOM (Document Object Model), les méthodes utilisées sont :

● constructeur()

● getDerivedStateFromProps() statique

● rendu()

● componentDidMount()

Mise à jour

Lorsque l'accessoire ou l'état fourni à un composant est modifié, le nouveau rendu du composant est également appelé phase de mise à jour. Dans cette phase, ci-dessous sont les méthodes de cycle de vie suivantes qui sont appelées :

● getDerivedStateFromProps() statique

● shouldComponentUpdate()

● rendu()

● getSnapshotBeforeUpdate()

● componentDidUpdate()

Lis : Vue vs React : Différence entre Vue et React

Démontage

Cette méthode est appelée lors du démontage de n'importe quel composant : -

● composant willUnmount()

C'est la dernière fonction à être invoquée avant que le modèle d'objet de document ne soit détruit. Cela fonctionne comme le nettoyage de tout élément construit pendant componentWillMount.

À des fins de gestion des erreurs dans le composant, il existe quelques méthodes réservées : -

● getDerivedStateFromError() statique

● componentDidCatch()

Méthodes de cycle de vie couramment utilisées expliquées en détail : -

● constructeur (accessoires)

Cette méthode de cycle de vie est utilisée lors de la phase de montage des composants. On peut avoir un objet d'état local déclaré ici. Le super(props) est appelé à l'intérieur du constructeur avant toute autre instruction ; sinon, une erreur se produit lors de l'accès à this.props.

Si l'on ne cherche pas à déclarer l'objet d'état local ou à lier le gestionnaire d'événements à l'instance, il n'est pas nécessaire d'écrire la méthode de cycle de vie des composants.

L'état d'appel dans le constructeur () n'est pas conseillé car il déclencherait un nouveau rendu avant la fin du cycle précédent.

Constructor() est le seul endroit où l'on peut affecter directement l'état. Sinon, s'il est nécessaire de modifier l'état ou d'affecter quelque chose à l'intérieur, this.setSate doit être utilisé.

● rendu()

À l'intérieur de ces composants de méthode, la partie JSX est écrite. JSX est similaire à HTML mais est une syntaxe étendue de javascript. Lorsque nous utilisons JSX, nous pouvons également utiliser des expressions Javascript dans la méthode de rendu.

La méthode render() de n'importe quel composant parent peut contenir des composants enfants. Tout en suivant le modèle de composition, qui est la base des composants réactifs.

Chaque fois que la méthode de rendu du parent est appelée, le rendu démarre également pour les composants enfants, et le rendu parent n'est terminé qu'une fois l'ensemble du rendu enfant terminé.

La méthode render est une méthode obligatoire ; sans cela, le composant ne peut pas être créé car c'est le seul endroit où la partie vue d'un composant peut être écrite.

La méthode de rendu est pure ; cela signifie qu'il ne peut pas modifier l'état à l'intérieur.

Pour tout composant dans la phase de mise à jour, le nouveau rendu d'un composant particulier se produira ou non peut dépendre du type de retour ou de l'utilisation de la méthode de cycle de vie shouldComponentUpdate() .

Avoir des appels d'API et toute interaction avec le navigateur à l'intérieur de cette méthode n'est pas conseillé, et cela générera une erreur.

● componentDidMount()

Cette méthode est invoquée immédiatement après le montage du composant. Maintenant, DOM est disponible pour d'autres manipulations. On peut appeler setState à l'intérieur de cette méthode.

De plus, l'interaction avec les appels de navigateur ou d'API peut être effectuée à partir d'ici.

Cette méthode n'est appelée qu'une seule fois, c'est-à-dire au moment de la création. La méthode ne s'exécutera dans aucune autre partie de re-rendu, et la logique à l'intérieur ne s'exécutera pas non plus.

● componentDidUpdate()

C'est la même chose que le componentDidMount.; on peut obtenir une erreur avec la seule différence que cela n'est appelé que lorsque le nouveau rendu d'un composant se produit. Cette méthode n'est pas appelée pour le rendu initial.

Le setState et les effets secondaires peuvent être effectués à l'intérieur de cette méthode. Mais le setState doit être enveloppé dans une condition ; sinon, on pourrait se retrouver dans la boucle infinie de rendu, et le rendu ne se terminerait jamais.

De plus, componentDidUpdate ne sera pas appelé si le shouldComponentUpdate() renvoie false.

● componentWillUnmount()

Cette méthode est appelée lorsque la phase de démontage d'un composant est en cours.

Dans la méthode, idéalement, la suppression des gestionnaires d'événements et le nettoyage de la mémoire peuvent être réalisés.

La fonction setState() ne doit pas être appelée à l'intérieur car elle provoque le re-rendu d'un composant.

● shouldComponentUpdate()

Lors du développement d'applications réactives, il y a souvent des cas où il faut éviter un nouveau rendu inutile des composants. Pour réaliser cette composante en classe, on dispose de la méthode évoquée ci-dessus. Si cette méthode renvoie false, le nouveau rendu du composant et de ses composants enfants ne se produira pas.

Les accessoires précédents peuvent être vérifiés et comparés aux nouveaux accessoires fournis pour s'assurer qu'il n'y a pas de changement, puis renvoyer faux.

L'appel de la méthode setState() à l'intérieur n'est pas conseillé car encore une fois, cela entraînerait un nouveau rendu.

De plus, les effets secondaires ne doivent pas être effectués dans cette méthode.

Il existe également une autre alternative à cette méthode. On peut utiliser React.pureComponents tout en étendant la classe. C'est beaucoup plus stable et fiable que le shouldComponentUpdate().

Enfin et surtout, il existe des types de limites d'erreur de composants de réaction qui sont présents pour attraper les erreurs.

Il faut simplement envelopper le composant avec le composant de limite d'erreur.

À l'intérieur de ce composant spécial, deux méthodes de cycle de vie sont utilisées : -

1. statique getDerivedStateFromError()
2. composantDidCatch()

Les deux sont appelés si un composant descendant génère une erreur.

Le premier est appelé pendant la phase de rendu, donc aucun effet secondaire n'est autorisé à l'intérieur. Le second est appelé pendant la phase de validation, donc les effets secondaires sont autorisés à l'intérieur.

Lisez aussi: Salaire du développeur ReactJS en Inde

Apprenez des cours de génie logiciel en ligne dans les meilleures universités du monde. Gagnez des programmes Executive PG, des programmes de certificat avancés ou des programmes de maîtrise pour accélérer votre carrière.

Conclusion

Le cycle de vie des composants de réaction ajoute de la complexité au code, mais l'exécution et la manipulation systématiques effectuées à travers les méthodes semblent assez attrayantes du point de vue du développeur. Le cycle de vie React permet de restructurer ou de manipuler les composants.

Si vous souhaitez en savoir plus sur React, le développement full-stack, consultez le programme Executive PG de upGrad & IIIT-B en développement logiciel full-stack, conçu pour les professionnels en activité et offrant plus de 500 heures de formation rigoureuse, plus de 9 projets. et affectations, statut d'ancien élève de l'IIIT-B, projets de synthèse pratiques et aide à l'emploi avec les meilleures entreprises.

Préparez-vous à une carrière d'avenir

Postulez maintenant pour le programme Executive PG en développement Full Stack