Tutoriel React, partie 19: Méthodes du cycle de vie des composants

Dans la partie d'aujourd'hui de la traduction du didacticiel React, vous verrez un aperçu des méthodes de cycle de vie des composants.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 34. Méthodes du cycle de vie des composants, partie 1

→ Original

L'une des caractéristiques du développement d'applications React est le fait que nous écrivons du code JavaScript assez simple qui pilote les mécanismes internes de React et nous offre ainsi de grandes opportunités pour développer des interfaces d'application et travailler avec des données. Dans le même temps, les composants que nous utilisons au cours de leur cycle de vie passent par certaines étapes. Souvent, ce qui arrive à un composant d'une application est comparé à la vie d'une personne. Les gens naissent, vivent, dans leur vie des événements importants se produisent, après quoi ils meurent. Les composants de React dans ce domaine sont similaires aux personnes, car ils sont également "nés", "vivants" et "morts". En travaillant avec des composants, nous pouvons réagir à ce qui leur arrive, grâce aux méthodes de leur cycle de vie qui sont appelées à des moments particuliers de leur «vie».

Récemment, l'équipe de développement React a dépassé les méthodes de cycle de vie à trois composants. Nous considérerons néanmoins ces méthodes, puisqu'elles peuvent encore être utilisées, et puisqu'elles se trouvent dans le code existant. De plus, deux nouvelles méthodes de cycle de vie des composants ont été ajoutées à React, dont nous discuterons dans la prochaine leçon.

Nous ne considérerons que les méthodes les plus importantes qui sont les plus pertinentes pour ceux qui viennent de commencer à étudier React. Lorsque vous continuez à maîtriser cette bibliothèque, vous pourrez expérimenter d'autres méthodes.

Voici quelques bonnes informations sur les méthodes de cycle de vie des composants React qui étaient pertinentes avant React 16.3. Ici , dans une publication du blog officiel des développeurs React, vous pouvez découvrir les changements survenus dans React 16.3.

Maintenant, commençons la discussion sur les méthodes de cycle de vie des composants React que vous rencontrerez le plus souvent.

Nous utiliserons, comme toujours, le projet de démonstration ici. Dans ce cas, nous commençons avec un projet standard créé à l'aide de create- App.js -app, dans le fichier App.js qui contient le code suivant:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Pour commencer, examinons la méthode que vous avez déjà utilisée avec les composants basés sur les classes. Il s'agit de la méthode render() .

Souvent, il n'est pas mentionné lorsqu'il parle des méthodes de cycle de vie des composants. Je pense que cette méthode, quand on compare un composant avec une personne, peut être comparée à s'habiller avant de sortir. L'objectif de cette méthode est de déterminer ce qui sera affiché à l'écran, c'est-à-dire à quoi ressemblera le composant. La méthode render() peut être appelée plusieurs fois au cours de la vie d'un composant. Ainsi, lorsque React détermine que quelque chose lié à un composant a changé, comme un état ou des propriétés, c'est-à-dire quelque chose qui peut affecter l'apparence d'un composant, React peut appeler cette méthode. Cela peut être comparé, si nous continuons l'analogie avec les gens, afin qu'une personne puisse décider de changer de vêtements. Par exemple, afin de, après une journée de travail, se préparer à une sorte d'événement de vacances.

Examinons maintenant une autre méthode de cycle de vie des componentDidMount() - componentDidMount() . Cette méthode est déclarée, comme toute autre méthode de composant basée sur une classe, dans le corps d'une classe de composant:

 componentDidMount() { } 

Cette méthode est appelée au moment du cycle de vie du composant, qui peut être comparée à la «naissance» de ce composant. Cette méthode est déclenchée une fois après que le composant est monté (inséré) dans l'arborescence DOM. Dans le même temps, par exemple, si après avoir modifié certaines données qui affectent l'apparence du composant, elles seront à nouveau rendues, la méthode componentDidMount() ne sera pas appelée. Cela se produit du fait que lors de l'exécution de telles opérations, le composant n'est pas supprimé de l'arborescence DOM, puis à nouveau inclus dans l'arborescence.

La méthode componentDidMount() est généralement utilisée pour effectuer des appels à certaines API dans les cas où le développeur a besoin de données provenant de sources externes. Supposons que le composant que nous considérons ici s'appelle en fait TodoList et est un composant qui forme une liste de tâches dans une application Todo. La méthode componentDidMount() d'un tel composant peut charger des matériaux de la base de données du serveur qui sont nécessaires pour l'affichage correct de la liste de tâches stockée sur le serveur. Par conséquent, une fois l'installation du composant terminée, nous pouvons, dans la méthode componentDidMount() , charger les données nécessaires pour que le composant s'affiche correctement sur la page. Nous parlerons également du chargement des données nécessaires aux composants, mais pour le moment, vous vous souviendrez que c'est le cas d'utilisation le plus courant pour componentDidMount() .

La prochaine méthode de cycle de vie des composants dont nous discutons est appelée componentWillReceiveProps() . Cette méthode peut être comparée à ce qui se passe lorsque quelqu'un reçoit un cadeau de quelqu'un. Ainsi, un composant peut recevoir des propriétés d'un composant parent. Chaque fois qu'un composant prend des propriétés, cette méthode est appelée. En même temps, cette méthode est appelée chaque fois que le composant parent transmet les propriétés au composant enfant, et pas seulement lorsque cela se produit pour la première fois. Par exemple, si le composant parent décide de modifier les propriétés transmises au composant enfant, alors, dans la méthode componentWillReceiveProps() , nous pouvons, par exemple, vérifier si les nouvelles propriétés diffèrent de celles qui ont déjà été transmises au composant. Le fait est que si les nouvelles propriétés ne diffèrent pas des anciennes, cela signifie que leur réception ne change rien, ce qui signifie qu’après avoir découvert, nous ne pouvons rien faire de plus. Si les nouvelles propriétés sont différentes des anciennes, nous pouvons effectuer certaines actions. En règle générale, cette méthode est déclarée dans le corps de la classe de composants comme suit:

 componentWillReceiveProps(nextProps) { } 

Ici, il est généralement utilisé comme nom de paramètre, nextProps , mais vous pouvez nommer ce paramètre comme vous le souhaitez. Afin de comparer une propriété spécifique qui a déjà été transférée au composant avec ce qui lui a déjà été transmis plus tôt et de décider d'autres actions, vous pouvez utiliser cette construction:

 componentWillReceiveProps(nextProps) {   if (nextProps.whatever !== this.props.whatever) {       //   -    } } 

Habituellement, cette méthode est utilisée de cette façon.

Cependant, comme déjà mentionné, après la sortie de React 16.3, certaines méthodes du cycle de vie des composants ont été dépréciées, et componentWillReceiveProps() est l'une de ces méthodes.

Jusqu'à React 17, ces méthodes héritées peuvent toujours être utilisées, mais il vaut mieux ne pas le faire. Si vous ne pouvez pas vous passer de la méthode en question, vous devez l'appeler UNSAFE_componentWillReceiveProps() . Après React 17, le nom de la méthode componentWillReceiveProps() ne signifie rien de spécial.

Il est utile de connaître cette méthode afin de pouvoir comprendre du code obsolète, mais il ne sera pas utilisé dans le développement d'applications React modernes.

Une autre méthode intéressante de cycle de vie des composants est appelée shouldComponentUpdate() . Lui, si nous continuons à comparer la composante avec une personne, se souvient du moment où une personne se demande si elle doit changer de vêtements ou non. Dans des conditions normales, si React n'est pas complètement sûr de la nécessité de restituer un composant, il le restituera juste au cas où. Peu importe si cela est nécessaire, conformément à la logique d'application ou non.

Cela fait que React restitue les composants, même lorsque rien lié au composant ne change. Cela peut ralentir l'application, car selon ce principe, React traite tous les composants qui composent l'application. La méthode shouldComponentUpdate() permet au développeur d'optimiser l'application. Ici, vous pouvez implémenter une logique qui aide à comprendre la nécessité de mettre à jour le composant. Cette méthode est généralement déclarée comme ceci:

 shouldComponentUpdate(nextProps, nextState) {   //  true        //  false    } 

De plus, à partir de cette méthode, si le composant a besoin d'un nouveau rendu, en tenant compte des nouvelles propriétés et de l'état, vous devez retourner true . Sinon, false doit en être retourné. En fait, renvoyer false partir de cette méthode conduit au fait que le composant n'est pas mis à jour et que l'application s'exécute plus rapidement, mais en faisant cela, vous devez vous assurer que le composant n'a pas vraiment besoin d'être restitué. Si le composant doit être mis à jour et que cette méthode est retournée false , cela entraînera des erreurs difficiles à gérer.

Une autre méthode de cycle de vie des composants dont nous parlerons s'appelle componentWillUnmount() . Cette méthode marque la fin de la «vie» du composant - le moment où il est supprimé de l'arborescence DOM et disparaît de l'écran.

Cette méthode est principalement utilisée pour libérer des ressources occupées par un composant et mettre les choses en ordre avant de le supprimer. Par exemple, si quelque chose comme un écouteur d'événements a été configuré dans la méthode componentDidMount() , en raison duquel, lorsque l'utilisateur fait défiler la page, du code est exécuté, c'est dans componentWillUnmount() vous pouvez supprimer un tel écouteur d'événements. En fait, cette méthode a de nombreuses applications qui visent à supprimer de l'application tout ce qui s'avère inutile après la disparition du composant.

Voici le code complet de notre composant App , dans lequel des méthodes de cycle de vie sont ajoutées:

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     componentDidMount() {       //  ,        }     componentWillReceiveProps(nextProps) {       if (nextProps.whatever !== this.props.whatever) {           //   -        }   }     shouldComponentUpdate(nextProps, nextState) {       //  true            //  false      }     componentWillUnmount() {       //            // ( -   )   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

Ceci conclut cette leçon, même s'il convient de noter que les méthodes de cycle de vie des composants React ne sont pas limitées à celles que nous avons examinées aujourd'hui.

Leçon 35. Méthodes du cycle de vie des composants, partie 2

→ Original

Comme déjà mentionné dans la leçon précédente, lorsque React 16.3 est sorti, il a été signalé que les méthodes du cycle de vie à trois composants étaient dépassées. Ces méthodes sont componentWillMount() , componentWillReceiveProps() et componentWillUpdate() . Deux nouvelles méthodes ont également été signalées. Il s'agit de la méthode getDerivedStateFromProps() statique et de la méthode getSnapshotBeforeUpdate() . On ne peut pas dire que ces méthodes joueront un rôle important dans les futures classes de ce cours, mais malgré cela, nous les apprendrons ici.

Nous expérimenterons le même projet que nous avons utilisé la dernière fois.

Voici à quoi ressemble la déclaration de la méthode getDerivedStateFromProps() :

 static getDerivedStateFromProps(props, state) { } 

Notez le static avant le nom de la méthode. Il, sur la base des propriétés acceptées par lui, doit retourner un état mis à jour. Il est utilisé dans les cas où un certain composant doit accepter les propriétés entrantes qu'il reçoit du composant parent et configurer son état en fonction de ces propriétés. Des détails sur cette méthode peuvent être trouvés ici . Ce matériel, publié sur le blog React, dit que l'utilisation de cette méthode est loin d'être justifiée dans toutes les situations où elle semble utile. Son utilisation incorrecte peut conduire à diverses erreurs, à une baisse des performances de l'application, alors utilisez-la avec prudence. Vous ne devriez pas essayer de résoudre des problèmes avec son aide, pour la solution de laquelle il n'est pas prévu. Voici la documentation de cette méthode.

Parlons maintenant de la méthode getSnapshotBeforeUpdate() . Voici à quoi ressemble sa déclaration dans le corps de la classe:

 getSnapshotBeforeUpdate() { } 

Elle peut être considérée comme une méthode de cycle de vie qui vous permet de créer quelque chose comme une sauvegarde de ce qui est dans le composant avant de le mettre à jour. Il ressemble à un instantané de l'état d'une application. Il convient de noter que les développeurs de React disent que la portée de cette méthode est limitée. Voici la documentation pour cela.

Résumé

Aujourd'hui, nous avons parlé des méthodes de cycle de vie des composants. Lorsque vous avancerez dans le développement d'applications React, elles vous seront certainement utiles. Dans les autres classes de ce cours, nous rencontrerons ces méthodes, en particulier, avec componentDidMount() . La prochaine fois, nous parlerons du rendu conditionnel.

Chers lecteurs! Si vous développez professionnellement des applications React, veuillez nous expliquer comment vous utilisez les méthodes de cycle de vie des composants.