Cycle de vie de React et scénarios d'utilisation courants

Préface

Le cycle de vie de React a toujours été très important au travail. Nous devons souvent faire ce dont nous avons besoin dans les délais requis. Dans React, le cycle de vie peut être divisé en deux étapes: initialisation (initialisation), montage (montage), Phases de mise à jour et de démontage, chaque phase appellera différentes fonctions du cycle de vie. Bien sûr, avec la mise à jour de la version react, il y aura des changements relatifs, alors renvoyons-nous maintenant au résumé.

La plupart des équipes ne feront pas nécessairement de suivi et de mise à niveau vers la version 16, donc le cycle de vie avant 16 est toujours nécessaire à maîtriser, sans oublier que 16 est également basé sur les modifications précédentes

Initialisation

Autrement dit, la méthode de construction (constructor ()) de la classe dans le code suivant. La classe Test hérite de la classe de base de react Component et hérite également de la classe de base de react, de sorte que les méthodes telles que render () et life cycle peut être utilisé. Cela montre également la raison pour laquelle les composants fonctionnels ne peuvent pas utiliser ces méthodes. super (props) est utilisé pour appeler la méthode de construction (constructor ()) de la classe de base, et également injecter les accessoires du composant parent dans le composant enfant, et lire le composant enfant (les accessoires du composant sont en lecture seule et immuable, et l'état est variable). Le constructeur () est utilisé pour initialiser certains composants, comme la définition du contenu initial de this.state.

Remarque:
constructor ne compte pas comme fonction de cycle de vie. constructorNous l'appelons le constructeur, qui est la syntaxe de base de ES6. Bien qu'elle ait les mêmes propriétés que la fonction de cycle de vie, elle ne peut pas être considérée comme une fonction de cycle de vie. Mais vous devez le considérer comme une fonction du cycle de vie dans votre cœur, je le considère personnellement comme une Initializationétape de React , définissant les propriétés (accessoires) et l'état (état).

import React, {
    
     Component } from 'react'
class Test extends Component {
    
    
  constructor(props) {
    
    
  super(props)
  }
}

Montage dans la deuxième étape

1. componentWillMount: S'exécute lorsque le composant est sur le point d'être monté sur la page.

Appelé avant que le composant ne soit monté sur le DOM, et il ne sera appelé qu'une seule fois. L'appel de this.setState ici n'entraînera pas le nouveau rendu du composant. Vous pouvez également faire avancer le contenu écrit ici au constructeur (), de sorte que le projet est très utilisé moins.

2. render: S'exécute lorsque l'état de la page ou les accessoires changent.

En fonction des accessoires et de l'état du composant (sans retransmission et réaffectation des deux, si l'argument change, peut provoquer le rendu du composant), renvoyez un élément React (décrivez le composant, c'est-à-dire l'interface utilisateur), et non responsable du rendu réel du composant, Then React rend lui-même la page DOM en fonction de cet élément. Render est une fonction pure (fonction pure: le résultat de retour de la fonction ne dépend que de ses paramètres; il n'y a pas d'effets secondaires dans l'exécution de la fonction). This.setState ne peut pas être exécuté dedans, et il y aura des effets secondaires de changer l'état du composant.

3. componentDidMount: Exécuté lorsque le composant est monté.

Appelé après le montage du composant sur le DOM, et ne sera appelé qu'une seule fois

export default class App extends Component {
    
    
  componentWillMount () {
    
    
    console.log('componentWillMount----组件将要挂载到页面的时刻')
  }
  render() {
    
    
    console.log('render---组件挂载中.......')
    return (
      <div>
        <TodoList/> 
        <ReduxTodoList/>
      </div>
    )
  }
  componentDidMount () {
    
    
    console.log('componentDidMount----组件挂载完成的时刻执行')
  }
}

Résultat imprimé:

componentWillMount----组件将要挂载到页面的时刻执行
render----开始挂载渲染
componentDidMount----组件挂载完成的时刻执行

这就是挂载阶段的生命周期的执行顺序,当然他跟书写顺序没有关系

Remarque:
componentWillMount Et componentDidMountces deux fonctions de cycle de vie ne sont exécutées qu'une seule fois lorsque la page est actualisée, et la fonction de rendu est exécutée tant qu'il y a des changements d'état et d'accessoires. Ce débutant doit faire attention.

Mise à jour en trois étapes de mise à jour

Cette étape est une étape plus compliquée. À partir de la figure ci-dessus, on peut voir qu'il existe deux types de mises à jour des composants. Il est nécessaire de clarifier le mécanisme de mise à jour des composants React. Mise à jour de l'état provoquée par setState ou mise à jour des accessoires provoquée par le nouveau rendu du composant parent. L'état et les accessoires mis à jour entraîneront le nouveau rendu du composant enfant, qu'il y ait ou non un changement par rapport au précédent.

1. shouldComponentUpdateAvant que le composant ne soit mis à jour, il est automatiquement exécuté. Il nécessite un résultat booléen à renvoyer. Il doit avoir une valeur de retour. Ici, il renvoie directement un vrai (en développement réel, cela est d'une grande utilité et peut résoudre efficacement les problèmes de performances. ), si vous renvoyez false, le composant ne sera pas mis à jour. Pour faire simple, si vous renvoyez true, vous acceptez la mise à jour du composant; si vous renvoyez false, vous vous opposez à la mise à jour du composant. Cette méthode compare nextProps, nextState et this.props, this.state du composant actuel. Lorsqu'elle renvoie true, le composant actuel continue d'effectuer le processus de mise à jour et renvoie false pour arrêter la mise à jour du composant en cours, qui peut être utilisée pour réduire le rendu inutile du composant et optimiser les performances du composant.

2. componentWillUpdateAvant la mise à jour du composant, mais shouldComponenUpdateaprès son exécution, mais lorsque le shouldComponenUpdateretour est faux, la mise à jour du composant sera opposée, et cette fonction ne sera pas exécutée

3. componentDidUpdateExécuté après la mise à jour du composant, il s'agit de la dernière partie de la mise à jour du composant

export default class App extends Component {
    
    
  shouldComponentUpdate () {
    
    
    console.log ('1.shouldComponentUpdate----组件更新之前')
    return true
  }
  componentWillUpdate () {
    
    
    console.log ('2.componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行 ')
  }
  render() {
    
    
    console.log('3.render---组件挂载渲染.......')
    return (
      <div>
        <TodoList/> 
        <ReduxTodoList/>
      </div>
    )
  }
  componentDidUpdate () {
    
    
    console.log('componentDidUpdate----组件更新完成的时刻执行')
  }
}

Imprimer les résultats et l'ordre d'exécution

1-shouldComponentUpdate---组件发生改变前执行
2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
3-render----开始挂载渲染
4-componentDidUpdate----组件更新之后执行

4. Alors, componentWillReceivePropsquand la figure ci-dessus sera-t-elle exécutée? En fait, le composant enfant reçoit les paramètres passés par le composant parent, et la fonction de rendu du composant parent est à nouveau exécutée, et ce cycle de vie sera exécuté.
   Remarque: La fonction ne sera pas exécutée lorsque le composant
   utilisé componentWillReceivePropsexiste dans le Dom pour la première fois;
   s'il existe déjà dans le Dom, la fonction sera exécutée.
   Elle sera appelée lorsque les accessoires transmis par le composant parent sont sur le point de provoquer la mise à jour du composant. Cette méthode accepte un paramètre qui fait référence aux dernières données d'état des accessoires transmises par le composant parent actuel au composant. Dans cette méthode de cycle de vie, nous pouvons savoir si les accessoires ont changé en comparant les valeurs des nouveaux et anciens accessoires de nextProps et this.props, et faire une logique de traitement des données à son tour.

Démontage

Il n'y a qu'une seule fonction de cycle de vie à ce stade: componentWillUnmountcette méthode est appelée avant la désinstallation du composant. Vous pouvez effectuer des travaux de nettoyage ici, comme effacer le minuteur utilisé dans le composant, effacer les componentDidMountéléments DOM créés manuellement, dissocier les événements, etc. . Évitez de provoquer des fuites de mémoire

Résumez la page d'optimisation qui utilise la fonction de cycle de vie:

1. componentDidMountDemander ajax dans la fonction de cycle de vie, il est recommandé de l'exécuter dans la fonction componentDidMount, car il est exécuté dans le rendu, il y aura beaucoup de problèmes, comme le rendu de la boucle; s'il est exécuté dans le componentWillMount, il y aura conflits lors de l'utilisation de RN. Par conséquent, il est fortement recommandé de faire une requête ajax dans la fonction componentDidMount.
2. Lorsque le composant parent est mis à jour et transmis au composant enfant, les avantages sont quand même modifiés, la fonction de rendu du composant enfant est constamment déclenchée et des problèmes de performances se produisent. Nous pouvons généralement survenir lors de la phase de mise à jour, utilisez donc shouldComponentUpdate

shouldComponentUpdate(nextProps,nextState){
    
    
    if(nextProps.content !== this.props.content){
    
    
        return true
    }else{
    
    
        return false
    }

}

Le cycle de vie de React v16.4

Raison du changement

Il s'avère que le cycle de vie (avant React v16.0) n'est pas adapté après le lancement de Fiber dans React v16 , car si le rendu asynchrone doit être activé, toutes les fonctions avant la fonction de rendu peuvent être exécutées plusieurs fois.
Quel est le cycle de vie original (avant React v16.0) qui a été exécuté avant le rendu?

• composantWillMount
• composantWillReceiveProps
• shouldComponentUpdate
• composantWillUpdate

Si le développeur ouvre le rendu asynchrone et effectue des requêtes A JAX avec les méthodes du cycle de vie exécutées avant le rendu ci-dessus, alors AJAX sera appelé plusieurs fois inutilement. . . Evidemment pas le résultat que nous attendions. De plus, lancer AJAX dans componentWillMount, quelle que soit la vitesse à laquelle le résultat est obtenu, il ne pourra pas rattraper le premier rendu, et componentWillMount sera également appelé pour le rendu côté serveur (bien sûr, cela peut être le résultat attendu Ces opérations d'E / S sont plus appropriées dans componentDidMount.

Ban ne peut pas être mieux que l'effet des développeurs de persuasion ne pas utiliser, donc en plus de shouldComponentUpdate, toutes les autres fonctions avant la fonction render ( componentWillMount, componentWillReceiveProps, componentWillUpdate) ont été getDerivedStateFromPropsremplacés.

C'est-à-dire utiliser une fonction statique getDerivedStateFromPropspour remplacer les plusieurs fonctions de cycle de vie obsolètes, ce qui oblige le développeur à ne faire que des opérations sans effets secondaires avant le rendu, et les opérations qui peuvent être effectuées se limitent à déterminer le nouvel état en fonction de accessoires et état

Deux nouvelles fonctions de cycle de vie sont nouvellement introduites:

1. getDerivedStateFromProps

getDerivedStateFromProps à l'origine (dans React v16.3) est uniquement créé et mis à jour (la partie déclenchée par le composant parent), c'est-à-dire qu'il n'est pas déclenché par le composant parent, puis getDerivedStateFromProps ne sera pas appelé, comme son propre déclencheur setState ou forceUpdate déclenche
. bit of a mess, pour corriger cela dans React v16.4, afin que getDerivedStateFromProps soit Mountingou Updating, et indépendamment de ce qui a provoqué la mise à jour, tout sera appelé, spécifiquement pour voir le cycle de vie de la figure React v16.4.
getDerivedStateFromProps (props, state) est appelé avant la méthode de rendu lorsque le composant est créé et lorsqu'il
est mis à jour . Il doit renvoyer un objet pour mettre à jour l'état ou renvoyer null pour ne rien mettre à jour.

Chaque fois que le composant parent déclenche le rendu du composant actuel, getDerivedStateFromProps sera appelé, afin que nous ayons la possibilité d'ajuster le nouvel état en fonction des nouveaux accessoires et de l'état précédent. Si vous le mettez dans les trois fonctions obsolètes du cycle de vie qui sont relativement pures et n'ont aucun effet secondaire, vous pouvez passer à getDerivedStateFromProps; si vous faites malheureusement quelque chose comme AJAX, vous devez d'abord réfléchir à la raison pour laquelle vous l'avez fait en premier lieu, et puis passez à componentDidMount Ou allez à componentDidUpdate. À l'heure actuelle, lorsque vous utilisez les trois fonctions de cycle de vie obsolètes, un avertissement rouge s'affiche en mode développement, vous obligeant à utiliser le préfixe UNSAFE_. Il peut être supprimé lorsqu'une mise à jour majeure de la version est lancée, de sorte que les développeurs qui ont la chance d'abandonner l'utilisent.

2. getSnapshotBeforeUpdate

getSnapshotBeforeUpdate () est appelé après le rendu, lorsque le DOM peut être lu mais ne peut pas être utilisé. Il permet à votre composant de capturer certaines informations (telles que la position de défilement) du DOM avant qu'elles ne changent. Toute valeur retournée par ce cycle de vie sera transmise en tant que paramètre à componentDidUpdate ().
Exemples donnés sur le site officiel:

class ScrollingList extends React.Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.listRef = React.createRef();
  }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    
    
    //我们是否要添加新的 items 到列表?
    // 捕捉滚动位置，以便我们可以稍后调整滚动.
    if (prevProps.list.length < this.props.list.length) {
    
    
      const list = this.listRef.current;
      return list.scrollHeight - list.scrollTop;
    }
    return null;
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    
    
    //如果我们有snapshot值, 我们已经添加了 新的items.
    // 调整滚动以至于这些新的items 不会将旧items推出视图。
    // (这边的snapshot是 getSnapshotBeforeUpdate方法的返回值)
    if (snapshot !== null) {
    
    
      const list = this.listRef.current;
      list.scrollTop = list.scrollHeight - snapshot;
    }
  }
  render() {
    
    
    return (
      <div ref={
    
    this.listRef}>{
    
    /* ...contents... */}</div>
    );
  }
}

Remarque:
Lorsque vous utilisez la nouvelle API de cycle de vie de getDerivedStateFromProps, getSnapshotBeforeUpdate et la fonction de cycle de vie obsolète en même temps, la fonction de cycle de vie obsolète sera directement ignorée et ne sera pas exécutée à temps!