Le cycle de vie de la réaction est divisé en plusieurs étapes

Le cycle de vie de React est divisé en 3 étapes : 1. L'étape de création, également appelée étape d'initialisation, qui représente le processus lorsque le composant est rendu dans l'arborescence DOM pour la première fois ; , également appelée étape d'existence, indique le processus de re-rendu des composants ; 3. La phase de déchargement, également appelée phase de destruction, indique le processus de suppression des composants du DOM ;

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Le cycle de vie de React est divisé en plusieurs étapes

Le concept de cycle de vie est largement utilisé, notamment dans de nombreux domaines tels que l'économie, l'environnement, la technologie, la société, etc. Son sens fondamental peut être compris communément comme « de l'ensemble processus de "Cradle-to-Grave"

Comme Vue, l'ensemble du cycle de vie des composants React comprend une série de processus depuis la création, l'initialisation des données, la compilation de modèles, le montage de Dom→rendu, la mise à jour→rendu, la désinstallation, etc.

Processus

L'il nous parlons principalement du cycle de vie après React16.4, qui peut être divisé en trois étapes:

• Stage de la création

• Stage de la fin de la scène étape Il est principalement divisé selon les méthodes de cycle de vie suivantes :

• Constructeur (ne me demandez pas pourquoi j'utilise le chinois, car l'anglais sera englouti, c'est trop difficile)

getDerivedStateFromProps

render
componentDidMount
• Constructor

Une méthode automatiquement appelée pendant le processus d'instance À l'intérieur de la méthode, les accessoires du composant parent sont obtenus via le super mot-clé

• Dans cette méthode, les opérations habituelles sont les suivantes. initialisez l'état ou suspendez cette méthode de chargement

getDerivedStateFromProps

Cette méthode est une nouvelle méthode de cycle de vie, elle ne peut donc pas accéder à l'instance du composant

Calendrier d'exécution : phase de création et de mise à jour du composant. , qu'il s'agisse d'un changement d'accessoires ou d'un changement d'état, sera également appelé

avant chaque méthode de rendu. Le premier paramètre est les accessoires à mettre à jour, et le deuxième paramètre est l'état de l'état précédent. ajoutez quelques restrictions pour éviter un état inutile. Update

Cette méthode doit renvoyer un nouvel objet comme nouvel état ou renvoyer null pour indiquer que l'état n'a pas besoin d'être mis à jour

render

Une méthode que les composants de classe doivent implémente pour restituer la structure DOM et peut accéder à l'état du composant et aux propriétés des accessoires

Remarque : ne définissez pas State dans le rendu, sinon cela déclenchera une boucle infinie et provoquera un crash de mémoire

componentDidMount

Le composant est exécuté après son montage au nœud DOM réel, et il est exécuté après la méthode de rendu

Cette méthode est principalement utilisée pour exécuter certaines opérations d'acquisition de données, de surveillance d'événements et d'autres opérations

Phase de mise à jour

Les fonctions de cette phase sont principalement les méthodes suivantes :

getDerivedStateFromProps

shouldComponentUpdate

render
getSnapshotBefore Update
componentDidUpdate
• getDerivedStateFromProps

Cette méthode est introduite comme ci-dessus

• shouldComponentUpdate

est utilisée pour indiquez au composant lui-même s'il doit restituer le composant en fonction des accessoires et de l'état actuels. Par défaut, il renvoie vraiMoment d'exécution : lorsque de nouveaux accessoires ou états sont atteints, il sera appelé et indiquera si le composant a a été mis à jour ou non en renvoyant true ou false. En général, il n'est pas recommandé d'effectuer des comparaisons approfondies dans cette méthode de cycle, ce qui affectera l'efficacité de SetState et ne pourra pas être appelé en même temps, sinon cela entraînera une boucle infinie pour appeler les mises à jour.

render

L'introduction est comme ci-dessus

getSnapshotBeforeUpdate

Cette fonction périodique est exécutée après le rendu, et l'élément DOM n'a pas été mis à jour au moment de l'exécution

Une valeur d'instantané renvoyée par cette méthode. est transmis comme troisième paramètre de composantDidUpdate

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

Le but de cette méthode est d'obtenir certaines informations avant la mise à jour du composant, telles que la position de défilement du composant. Une fois le composant mis à jour, certains états visuels de l'interface utilisateur peuvent être restaurés. sur la base de ces informations

componentDidUpdate

Calendrier d'exécution : mise à jour du composant déclenchée après l'achèvementDans cette méthode, vous pouvez effectuer les opérations correspondantes en fonction des changements dans les accessoires et l'état avant et après, telles que l'obtention de données, la modification des styles DOM , etc.

Phase de déchargement

componentWillUnmount

Cette méthode est utilisée avant la désinstallation du composant, nettoie certains événements d'écoute enregistrés ou annule les requêtes réseau souscrites, etc. Une fois qu'une instance de composant est désinstallée, elle sera ne peut pas être monté à nouveau, mais peut seulement être recréé

Apprentissage recommandé : "

Tutoriel vidéo React

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!