Résumé des bases du cycle de vie des composants de classe React

Le cycle de vie d'un composant fait référence au processus depuis le moment où un composant est créé jusqu'au moment où il est monté et exécuté sur la page, puis lorsque le composant est désinstallé lorsqu'il n'est pas utilisé. Seuls les composants de classe ont un cycle de vie (les composants de classe sont instanciés, les composants de fonction n'ont pas besoin d'être instanciés)

Le tableau de comparaison entre la nouvelle version et l'ancienne version du cycle de vie est le suivant :

Cycle de vie (constructeur())

Les composants de classe héritent de la classe de base React Component, et héritent donc de cette classe de base React afin que render(), Life Cycle et d'autres méthodes puissent être utilisées. Cela explique également pourquoi les composants de fonction ne peuvent pas utiliser ces méthodes.

constructor() : ses paramètres d'entrée sont des accessoires (propriétés personnalisées transmises depuis la portée parent et les enfants [structure de vue imbriquée à l'intérieur du composant]). La première ligne de code doit être super(props), qui appelle le constructeur de la classe parent. fonction

L'état propre du composant ne peut être défini qu'ici (définissez-le d'abord puis utilisez-le). L'état est ce qu'on appelle une variable déclarative.
Les accessoires ne peuvent pas être modifiés ici, ni utilisés pour effectuer des opérations ici (car le constructeur n'apparaît qu'une seule fois dans le cycle de déclaration).
N'attribuez pas d'accessoires et d'état de manière croisée ici. Dans la logique du code React, conservez toujours l'indépendance des accessoires et de l'état.
N'utilisez pas this.setState pour modifier l'état ici. Le rendu est effectué dès que la valeur est attribuée, mais dans le constructeur, le cycle de vie du rendu n'a pas encore été généré.
En général, n'écrivez pas de logique métier ici. Parfois, nous n'autorisons cela que lorsque nous devons en changer le point. Par exemple, les opérations DOM, BOM, etc. ne devraient pas être effectuées ici.
Généralement, héritez de la classe parent, définissez l'état et modifiez ce point.

Cycle de vie (phase de montage)

fonction crochet	Temps de déclenchement	effet
constructor	Lors de la création d'un composant, celui-ci est exécuté en premier et une seule fois lors de l'initialisation.	1. Initialiser l'état 2. Créer une référence 3. Utilisez bind pour résoudre ce problème de pointage, etc.
rendre	Déclenché à chaque fois que le composant est rendu	Rendu de l'interface utilisateur (remarque : setState() ne peut pas être appelé à l'intérieur)
composantDidMount	Exécuté après le montage du composant (rendu DOM terminé), exécuté une fois lors de l'initialisation et appelé avant que le navigateur ne mette à jour la vue.	1. Envoyez une demande de réseau 2.Opérations DOM

composantWillMount() : avant de réagir 16.3

Il est appelé avant que le composant ne soit monté sur le DOM, et ne sera appelé qu'une seule fois. L'appel de this.setState ici n'entraînera pas le nouveau rendu du composant, et le contenu écrit ici peut également être avancé vers constructor(), donc il C'est très simple dans le projet, utilisez moins.

composantDidMount() : après la réaction 17

Équivalent à Mounted() dans Vue, indiquant que la phase de montage est terminée et que ce cycle de déclaration n'est exécuté qu'une seule fois.
Diverses logiques métier (DOM, ref, déconnexion des interfaces, démarrage des minuteries, etc. peuvent toutes être effectuées ici)
This.setState() peut être utilisé plusieurs fois ici, et la valeur par défaut est asynchrone.
Ce cycle de vie est en phase de mise à jour et se produit après le rendu.

Cycle de vie (phase de mise à jour)

Avant de réagir 16.3

composantWillReceiveProps(nextProps,nextState)
- Ce cycle de vie nous permet principalement de surveiller les changements dans les accessoires. Si vous devez modifier un état du composant en conséquence après le changement des accessoires, changer l'état dans cette méthode ne le rendra pas deux fois, mais fusionnera directement l'état.
devraitComponentUpdate(nextProps,nextState)
- Il renverra une valeur booléenne pour déterminer si le composant de rendu doit être mis à jour. S'il renvoie false, il n'exécutera pas le cycle de vie vers le bas. C'est l'un des principaux moyens d'optimiser les applications de réaction. SetState() ne peut pas être appelé dans cette méthode, ce qui conduira à des appels circulaires.
composantWillUpdate
- Ce cycle de vie est utilisé pour gérer les choses avant la mise à jour du Dom. SetState ne peut pas être appelé à ce stade, ce qui entraînera des appels circulaires.
rendre
composantDidUpdate(preProps,preState)
- À ce stade, le rendu est terminé, Dom et l'état ont changé et les paramètres sont tous les valeurs de l'état précédent.

Après réagir 17

getDerivedStateFromProps(nextProps,preState)
- Un objet peut être remis à l'état de mise à jour.
devraitComponentUpdate rendre getSnapshotBeforeUpdate(preProps,preState)
- À ce stade, vous pouvez obtenir les coordonnées, la taille et d'autres informations connexes de l'élément Dom de l'état précédent. Utilisé pour remplacer composantWillUpdate dans l'ancien cycle de vie
Le troisième paramètre de composantDidUpdate apparaît.
- Exécuté avant que le dernier rendu ne soit soumis à l'arborescence DOM, il peut être utilisé pour obtenir les informations DOM avant la mise à jour.
composantDidUpdate (preProps, preState, instantané)
- Il ne sera pas appelé lors du premier rendu, mais sera appelé immédiatement après la mise à jour du composant. Lors de l'utilisation de this.setState dans ce cycle de vie, il doit être enveloppé dans une instruction conditionnelle, sinon cela provoquera une boucle infinie.

La phase de mise à jour se déclenche dans trois situations :

1. Le composant parent modifie les accessoires : Un composant ne peut pas modifier activement les attributs props qu'il possède. Ses attributs props lui sont transmis par son composant parent. Forcer la réaffectation des accessoires entraînera le rapport d'erreur du programme.

Utilisez-le directement. Chaque fois que le composant parent restitue et retransmet les accessoires, le composant enfant sera restitué directement, que les accessoires aient ou non changé. Peut être optimisé via la méthode ShouldComponentUpdate.
Dans la méthode composantWillReceiveProps, convertissez les accessoires dans votre propre état

2. Changer d'état : Le changement d'état s'effectue via l'interface setState. Une grande partie de la raison pour laquelle les composants sont mis à jour est due à l'appel de l'interface setState pour mettre à jour l'état.Nous appelons souvent setState de manière synchrone, mais en fait la méthode setState est asynchrone.

Le composant lui-même appelle setState, que l'état ait changé ou non. Peut être optimisé via la méthode ShouldComponentUpdate.

3. Appelez la méthode forceUpdate : forcez la mise à jour du composant.

Cycle de vie (phase de désinstallation)

fonction crochet	Temps de déclenchement	effet
composantWillUnmount	Désinstallations de composants (disparaît de la page)	Effectuer des travaux de nettoyage (tels que : minuterie de nettoyage, etc.)

Dans la nouvelle version, certaines raisons de dépréciation du cycle de vie : les trois hooks du cycle de vie ComponentWillMount, ComponentWillReceiveProps et ComponentWillUpdate sont tous exécutés dans la phase de rendu.

(1) Avant l'application de l'architecture fibre, la phase de rendu ne peut pas être interrompue. Une fois la page complexe, cela peut bloquer le rendu de la page ;

(2) React a donc introduit l'architecture fibre, qui a transformé le processus de rendu initialement synchrone en asynchrone, divisant une grande tâche de mise à jour en de nombreuses petites tâches, et la phase de rendu des tâches de faible priorité peut être interrompue par des tâches de haute priorité ;

(3) Cela provoque l'appel multiple des fonctions de cycle de vie exécutées dans la phase de rendu. Si certaines opérations avec des effets secondaires sont effectuées dans ces fonctions, comme l'envoi de requêtes réseau, la même requête réseau sera appelée plusieurs fois. . , un nouveau cycle de vie est donc nécessaire pour résoudre ce problème ;

(4) Utilisez la fonction statique getDerivedStateFromProps pour remplacer plusieurs fonctions de cycle de vie abandonnées. Les développeurs ne pourront pas obtenir d'instances de composants via cette méthode, ni envoyer de requêtes réseau ou appeler this.setState. En obligeant les développeurs à ne rien faire avant le rendu, Side -effectuer des opérations pour éviter les abus à vie.