Quelles sont les fonctions de cycle de vie des composants React ?

Chaque composant a certaines fonctions de cycle de vie.

Lorsqu'une instance de composant est créée et insérée dans le DOM, les fonctions suivantes seront appelées

constructor
componentWillMount
render
componentDidMount

pour changer l'état du composant ou props provoquera des mises à jour et les méthodes suivantes seront appelées lorsque le composant sera restitué

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

Lorsque le composant est supprimé du DOM, le Les méthodes suivantes seront appelées

componentWillUnmount

1.render()

render La valeur de retour de render est du type suivant :
(1) élément réagir : soit un composant personnalisé, soit un composant DOM natif
(2)chaîne ou number : sera rendu dans un nœud de texte dans DOM
(3)Portails :Créer <🎜 via ReactDOM.createPortal
>(4)null :Rien ne sera rendu
(5)Booléen :Rien ne sera rendu
(6)Un tableau contenant plusieurs elements

render(){
    return [
        <li key=&#39;1&#39;>1</li>,
        <li key=&#39;2&#39;>2</li>
    ]
}

La méthode render

doit être simple. L'état du composant ne peut pas être modifié dans render À chaque fois que render est appelé, a Nouveaux résultats. Et vous ne pouvez pas interagir avec le navigateur dans render Si vous devez interagir avec le navigateur, exécutez-le dans composantDidMount ou dans d'autres fonctions de cycle de vie.

2.constructor(props)

react

composant Le constructeur est appelé avant le chargement du composant. Si constructor n'est pas explicitement défini, le constructeur par défaut sera appelé lors de l'instanciation du composant Si constructor est explicitement défini dans une sous-classe de React.Component, alors c'est nécessaire. d'appeler super(props) d'abord dans le constructeur.
C'est un bon choix pour instancier l'état dans le constructeur. Voici un exemple de morceau de code

constructor(props) {
  super(props);
  this.state = {
    color: props.initialColor
  };
}

Utiliser

dans react Il est légal que les props initialisent state, mais il y a un problème : lorsque props est mis à jour, state ne sera pas mis à jour. La solution est la suivante : mettre à jour l'état avec de nouveaux props dans le componentWillReceiveProps(nextProps) du composant. Bien que cela puisse résoudre le problème, il n'est pas recommandé de mettre à niveau l'état vers le composant parent public le plus proche <.>

Three.componentWillMount()

componentWillMount, composantWillMount sera appelé immédiatement avant le chargement Il sera appelé avant d'appeler render. La modification de state dans componentWillMount n'entraînera pas le rendu du composant. Cette méthode ne sera appelée que pour le rendu côté serveur. Il est recommandé de remplacer cette méthode par constructeur.

4.componentDidMount()

Lorsque le composant est chargé, componentDidMount sera déclenché immédiatement. La modification de l'état dans cette fonction entraînera le déclenchement. composant à restituer. Le DOM ne peut être manipulé qu'après le chargement du composant. Si vous devez charger des données distantes, c'est une bonne idée d'envoyer une requête réseau ici. >componentWillReceiveProps sera déclenché avant que le composant qui a été reproduit n'accepte de nouveaux props. Si vous devez mettre à jour

state pour répondre à la mise à jour des

props, vous pouvez mettre à jour state via la méthode setState ici. Lorsque le composant reçoit des

props pour la première fois, cette méthode ne sera pas appelée

Remarque : Cette méthode peut être appelée si les props n'ont pas été modifiés, donc dans cette méthode le actuel. les accessoires seront Il est nécessaire de comparer les accessoires suivants.
6.shouldComponentUpdate(nextState,nextProps) Lorsque de nouveaux accessoires ou état sont acceptés,

shouldComponentUpdate sera appelé avant le rendu. Cette méthode renvoie

true par défaut. En utilisant forceUpdate, cette méthode ne sera pas appelée. Si shouldComponentUpdate renvoie

false, les

componentWillUpdate, render et componentDidMount suivants ne seront pas appelés , et le composant et ses sous-composants ne seront pas restitués. 7.componentWillUpdate(nextProps, nextState) Lorsque de nouveaux props ou état sont reçus, cette méthode sera appelée immédiatement avant le nouveau rendu. Vous ne pouvez pas

this.setState() dans cette méthode. Cette méthode ne sera pas appelée pour le premier rendu

8.componentDidUpdate(. prevProps, prevState) Cette méthode sera appelée immédiatement une fois la mise à jour terminée. Cette méthode ne sera pas appelée pour le premier rendu. Lorsque le composant est mis à jour, vous pouvez manipuler le DOM ici. Lorsque vous constatez que les props actuels sont différents des

props précédents, c'est une bonne idée d'envoyer une requête réseau ici

.

9.componentWillUnmount()Cette méthode sera appelée immédiatement avant la destruction du composant, et certains nécessaires le nettoyage peut être effectué avec cette méthode

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!