Une brève analyse du cycle de vie des composants React (analyse de code)

Cet article vous apporte une brève analyse du cycle de vie (analyse du code) des composants React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

L'ensemble du cycle de vie de React comporte 3 étapes : création, mise à jour et désinstallation. Chaque étape a un travail et des méthodes correspondants. Nous pouvons l'étudier en regardant le schéma classique suivant :

La première étape

C'est l'étape de création du DOM virtuel 5 méthodes seront exécutées en séquence Parmi ces 5 méthodes, à l'exception de la méthode render, la. quatre autres méthodes Elle n'est appelée qu'une seule fois dans tout le cycle de vie, et sera certainement appelée une fois :

• getDefaultProps()

Cette méthode est créé lors de la création de l'instance du composant. Avant, c'est-à-dire avant l'exécution du constructeur, récupérez les paramètres passés par le composant parent. Vous pouvez modifier les paramètres ici et renvoyer les nouveaux paramètres sous forme d'accessoires

.
• getInitalState()

Lorsque le composant est créé, cette méthode sera appelée pour initialiser l'état du composant

• componentWillMount( )

Dans le composant Cette méthode est exécutée avant le rendu et peut être utilisée pour modifier l'état. React appelle d'abord cette fonction du composant parent, puis appelle cette fonction du composant enfant

• render()

démarre le rendu du composant fonction et renvoie un DOM virtuel avec un seul nœud racine. L'état du composant ne peut pas être modifié de manière synchrone dans cette fonction.

• componentDidMount()

Après le rendu, le composant de notification a été chargé. React appelle d'abord cette fonction du composant enfant, puis appelle cette fonction du composant parent. A partir de cette fonction, le composant peut interagir avec d'autres frameworks. Par exemple, régler une minuterie ou faire une requête réseau.

Deuxième étape

À ce stade, le composant est entré dans la phase de fonctionnement stable. À ce stade, le composant peut gérer l'interaction de l'utilisateur ou recevoir des événements pour mettre à jour l'interface. Les méthodes suivantes peuvent être exécutées plusieurs fois au cours du cycle de vie, ou ne pas être exécutées une seule fois.

• componentWillReceiveProps()

Lorsque les paramètres correspondants dans le conteneur parent changent, cette fonction du composant enfant sera appelée. Les nouveaux accessoires seront transmis en tant que paramètres, et les anciens accessoires pourront être obtenus sur la base de this.props. Nous pouvons effectuer un traitement sur l'état dans cette fonction. Et la mise à jour de l'état dans cette fonction ne provoquera pas de rendu secondaire

• shouldComponentUpdate()

Cette fonction passe deux paramètres, le nouvel état et le nouveau accessoires. Les changements d'état et d'accessoires seront appelés à cette fonction. Cette fonction porte principalement des jugements sur les nextProps et nextState transmis. S'il renvoie vrai, il sera restitué (la valeur par défaut est vrai), s'il renvoie faux, il ne sera pas restitué. Dans certaines conditions, nous pouvons choisir de mettre à jour ou non en fonction des accessoires et de l'état transmis, améliorant ainsi l'efficacité.

• componentWillUpdate()

Semblable à la méthode composantWillMount, elle est appelée avant le rendu. Le composant recevra de nouveaux accessoires ou états. Une fois cette fonction appelée, nextProps et nextState seront respectivement définis sur this.props et this.state.

• componentDidUpdate()

Semblable à la méthode composantDidMount, elle est appelée après le rendu du rendu et cette fonction est appelée après que le vrai DOM est généré. Les paramètres transmis sont les accessoires et l'état précédents.

La troisième étape

C'est l'étape de la mort, principalement le nettoyage et la libération de la mémoire. Il n'existe qu'une seule méthode à ce stade, qui n'est appelée qu'une seule fois pendant tout le cycle de vie.

• componentWillUnmount()

Lorsque le composant doit être supprimé de l'interface, composantWillUnmount sera appelé. Certaines opérations de destruction associées sont effectuées ici, telles que l'annulation des minuteries, la surveillance des événements, etc.

Plusieurs situations qui déclenchent le rendu

Ici, nous considérons uniquement que ShouldComponentUpdate n'a pas été modifié, et renvoie toujours vrai

• Premier rendu, c'est-à-dire, Rendu initial

• Appelez this.setState (il ne sera pas déclenché à chaque fois que setState est appelé, React optimisera, comme le composant d'entrée d'antd)

• Le composant parent se produit Mise à jour, généralement les accessoires modifiés du composant enfant

• Si le composant parent déclenche le rendu, le composant enfant déclenchera bien sûr le rendu

• appelez en conséquence this.forceUpdate()

Un exemple simple

import React from 'react';
import ReactDOM from 'react-dom';
import style from './font.css';
import './index.less';

class Parent extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      willRender: true,
      prop: 1
    };
  }

  render(){
    return (
      <div>
        <button>{this.setState({prop: 10})}}>changePropsFromParent</button>
        {
          this.state.willRender &&
          <child></child>
        }
        <button>{this.setState({willRender: false})}}>UnmountChild</button>
      </div>
    );
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curr: 0
    };
  }

 getDefaultProps(){
   console.log('getDefaultProps');
 }

  getInitalState(){
    console.log('getInitalState');
  }

  componentWillMount(){
    console.log('componentWillMount');
  }

  componentDidMount(){
    console.log('componentDidMount');
  }

  componentWillReceiveProps(){
    console.log('componentWillReceiveProps');
  }

  shouldComponentUpdate(){
    console.log('shouldComponentUpdate');
    return true;
  }

  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('componentDidUpdate');
  }

  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render')

    return (
      <div>
        <button>this.setState({curr:2})}>setState</button>
        <button>{this.forceUpdate();}}>forceUpdate</button>
      </div>
    );
  }
}

ReactDOM.render(
  <parent></parent>,
  document.getElementById('root')
);

Recommandations associées :

Réagir analyse d'instance du cycle de vie des composants

Quel est le cycle de vie des composants React Native

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!