Le cercle d'un cycle de vie React

Les composants React passent par différentes étapes du cycle de vie de leur application, bien que ce qui se passe dans les coulisses puisse ne pas être évident.

Ces étapes comprennent:

• Monter
• renouveler
• désinstaller
• Gestion des erreurs

Chaque étape a une méthode correspondante à laquelle des actions spécifiques peuvent être effectuées sur des composants. Par exemple, lors de la récupération des données du réseau, vous voudrez peut-être appeler une fonction qui gère les appels d'API dans componentDidMount() (disponible dans la phase de montage).

Comprendre différentes approches de cycle de vie est crucial pour le développement d'applications REACT, car elle nous permet de déclencher des opérations avec précision en cas de besoin sans être confondu avec d'autres opérations. Cet article couvrira chaque cycle de vie, y compris les méthodes disponibles et les types de scénarios que nous les utilisons.

Phase de montage

Considérez les montures comme le stade initial du cycle de vie des composants. Le composant n'existait pas avant que le support ne se produise - il a simplement traversé le DOM jusqu'à ce que le montage se produise et le connecte dans le cadre du document.

Une fois le composant monté, nous pouvons profiter de nombreuses méthodes: constructor() , render() , componentDidMount() et static getDerivedStateFromProps() . Chaque méthode a son propre objectif, jetons un coup d'œil dans l'ordre.

constructeur()

constructor() est requise lors de la définition des états directement sur le composant pour lier les méthodes ensemble. Cela ressemble à ceci:

 // Une fois que le composant d'entrée commence à monter ...
constructeur (accessoires) {
  // ... définir des accessoires ...
  super (accessoires);
  // ... Dans ce cas, c'est un nom d'utilisateur vide ...
  this.state = {
    nom d'utilisateur: ''
  };
  // ... puis lier une méthode qui gère l'entrée change ce.handleInputchange = this.handleInputchange.bind (this);
}

Il est important de savoir que constructor est la première méthode appelée lors de la création d'un composant. Le composant n'a pas été rendu (à venir bientôt), mais le DOM le sait déjà et nous pouvons le s'accrocher avant qu'il ne soit rendu. Ce n'est donc pas là que nous appelons setState() ou introduisons des effets secondaires, car le composant est toujours en phase de construction!

J'ai écrit un tutoriel sur Refs avant et une chose que j'ai remarquée, c'est que lorsque vous utilisez React.createRef() , vous pouvez définir Ref dans constructor . Ceci est raisonnable, car Refs est utilisé pour modifier les valeurs sans accessoires ou doit renvoyer le composant avec des valeurs mises à jour:

 constructeur (accessoires) {
  super (accessoires);
  this.state = {
    nom d'utilisateur: ''
  };
  this.inputText = react.crearef ();
}

rendre()

render() est l'endroit où la marque du composant s'affiche sur l'extrémité avant. L'utilisateur peut y voir et y accéder pour le moment. Si vous avez déjà créé un composant React, vous le connaissez déjà - même si vous ne le réalisez pas - car il nécessite des balises de sortie.

 L'application de classe étend React.
  // Pendant le processus de montage, veuillez rendre le contenu suivant!
  rendre() {
    Retour (
      <div>
        <p>Bonjour le monde!</p>
      </div>
    )
  }
}

Mais ce n'est pas tout le but de render() ! Il peut également être utilisé pour rendre les tableaux de composants:

 L'application de classe étend React.
  rendre () {
    Retour [
      <h2 id="Outils-JavaScript">Outils JavaScript</h2> ,
      <frontend></frontend>,
      <backend></backend>
    ]]
  }
}

Même des fragments de composants:

 L'application de classe étend React.
  rendre() {
    Retour (
      <react.fragment><p>Bonjour le monde!</p></react.fragment>
    )
  }
}

Nous pouvons également l'utiliser pour rendre des composants en dehors de la hiérarchie DOM (similaire au portail React):

 // Nous créons un portail qui permet aux composants de déplacer le portail de classe étend React.
  // Tout d'abord, nous créons un constructeur d'élément div () {
    super();
    this.el = document.CreateElement ("div");
  }

  // Après le mont, ajoutons l'élément enfant du composant composantdidmount = () => {
    Portalroot.ApendChild (this.el);
  };

  // Si le composant est supprimé du DOM, alors nous supprimons également son composant des éléments enfantswillunmount = () => {
    Portalroot.removechild (this.el);
  };

  // Ah, maintenant nous pouvons rendre le composant et ses éléments enfants rendent () selon les besoins {
    const {enfants} = this.props;
    Retour Reactdom.CreatePortal (enfants, this.el);
  }
}

Bien sûr, render() peut rendre des nombres et des chaînes ...

 L'application de classe étend React.
  rendre () {
    Retour "Hello World!"
  }
}

Et valeurs nuls ou booléennes:

 L'application de classe étend React.
  rendre () {
    retourner null
  }
}

ComponentDidMount ()

Le nom componentDidMount() indique-t-il sa signification? Cette méthode est appelée une fois le composant monté (c'est-à-dire connecté au DOM). Dans un autre tutoriel, j'ai écrit sur l'obtention de données dans React, c'est là que vous souhaitez faire une demande à l'API pour obtenir des données.

Nous pouvons utiliser votre méthode de récupération:

 fetchusers () {
  Fetch (`https: // jsonplaceholder.typicode.com / utilisateur`)
    .Then (Response => Response.json ())
    .Then (data =>
      this.setstate ({
        utilisateurs: données,
        Isloading: False,
      })
    )
  .Catch (error => this.setState ({error, isLoading: false}));
}

Ensuite, appelez la méthode dans componentDidMount() Hook:

 composantdidmount () {
  this.fetchusers ();
}

Nous pouvons également ajouter des auditeurs d'événements:

 composantdidmount () {
  el.addeventListener ()
}

Très concis, non?

statique GetderivedStateFromprops ()

C'est un peu de nom verbeux, mais static getDerivedStateFromProps() n'est pas aussi compliqué qu'il y paraît. Il est appelé avant render() de la phase de montage et avant la phase de mise à jour. Il renvoie un objet pour mettre à jour l'état du composant, ou null s'il n'y a pas de contenu à mettre à jour.

Pour comprendre comment cela fonctionne, implémentons un composant de compteur qui définira une valeur spécifique pour son état de compteur. Ce statut ne sera mis à jour que lorsque la valeur de maxCount est plus élevée. maxCount sera passé du composant parent.

Ceci est le composant parent:

 L'application de classe étend React.
  constructeur (accessoires) {
    Super (accessoires)

    this.textInput = react.crearef ();
    this.state = {
      Valeur: 0
    }
  }

  handleIncrement = e => {
    E.PreventDefault ();
    this.setState ({valeur: this.state.value 1})
  };

  mandegredecment = e => {
    E.PreventDefault ();
    this.setState ({valeur: this.state.value - 1})
  };

  rendre() {
    Retour (
      <react.fragment><p>MAX COUNT: {this.state.value}</p>
           
          -
        <counter maxcount="{this.state.value}"></counter></react.fragment>
    )
  }
}

Nous avons un bouton pour augmenter la valeur de maxCount , que nous passons au composant Counter .

 Class Counter étend React.
  état = {
    Comptoir: 5
  }

  statique GetderivedStateFrombProps (NextProps, prevState) {
    if (prevState.counter <nextprops.maxcount return nextprops.maxcount retourner null rendre retour>
        <p>Count: {this.state.counter}</p>

      
    )
  }
}</nextprops.maxcount>

Dans le composant Counter , nous vérifions si counter est plus petit que maxCount . Si c'est le cas, nous définissons la counter de la valeur de maxCount . Sinon, nous ne faisons rien.

Phase de mise à jour

Une phase de mise à jour se produit lorsque les accessoires ou l'état du composant changent. Comme les montures, les mises à jour ont également leur propre ensemble de méthodes disponibles, que nous présenterons ensuite. Autrement dit, il convient de noter que render() et getDerivedStateFromProps() tirera également à ce stade.

DevracomponentUpdate ()

Lorsque l'état ou les accessoires du composant modifie, nous pouvons utiliser shouldComponentUpdate() pour contrôler si le composant doit être mis à jour. Cette méthode est appelée avant le rendu se produit et lorsque l'état et les accessoires sont reçus. Le comportement par défaut est true . Pour renvoyer chaque fois que l'État ou les accessoires changent, nous faisons cela:

 devraComponentUpDate (nextProps, nextState) {
  renvoie this.state.value! == NextState.Value;
}

Lorsque false est renvoyé, le composant ne sera pas mis à jour, mais appelle plutôt render() pour afficher le composant.

getSnaphotbeForeupdate ()

Une chose que nous pouvons faire est de capturer l'état du composant à un moment donné, ce qui est conçu pour ce à quoi getSnapshotBeforeUpdate() est conçu. Il est appelé après render() mais avant de combler de nouvelles modifications au DOM. La valeur de retour est réalisée comme le troisième paramètre à componentDidUpdate() .

Il prend l'état et les accessoires précédents comme paramètres:

 getSnapshotBeforeupdate (prevprops, prevState) {
  // ...
}

À mon avis, il y a peu de cas d'utilisation pour cette approche. Il s'agit d'une méthode de cycle de vie que vous ne pouvez pas utiliser souvent.

ComponentDidupDate ()

Ajoutez componentDidUpdate() à la liste des méthodes, où le nom dit à peu près tout. Si le composant est mis à jour, nous pouvons utiliser cette méthode pour l'accrocher à ce moment et la transmettre aux accessoires et à l'état précédents du composant.

 ComponentDidupdate (prevprops, prevState) {
  if (prevstate.counter! == this.state.counter) {
    // ...
  }
}

Si vous avez déjà utilisé getSnapshotBeforeUpdate() , vous pouvez également transmettre la valeur de retour en tant que paramètre sur componentDidUpdate() :

 ComponentDidupDate (prevprops, prevState, snapshot) {
  if (prevstate.counter! == this.state.counter) {
    // ....
  }
}

Phase de désinstallation

Nous voyons presque l'opposé de la phase de montage ici. Comme vous pouvez vous y attendre, la désinstallation se produit lorsque le composant est effacé du DOM et n'est plus disponible.

Nous n'avons qu'une seule méthode ici: componentWillUnmount()

Ceci est appelé avant que le composant ne soit désinstallé et détruit. C'est là que nous voulons effectuer tout nettoyage nécessaire après le départ du composant, tel que la suppression des écouteurs d'événements qui pourraient être ajoutés dans componentDidMount() ou effacer l'abonnement.

 // Supprimer le composant de l'écouteur d'événementswillunmount () {
  el.removeeventListener ()
}

Phase de gestion des erreurs

Il peut y avoir des problèmes dans la composante, ce qui peut entraîner des erreurs. Nous utilisons des limites d'erreur depuis un certain temps pour aider à résoudre ce problème. Ce composant limite d'erreur utilise certaines méthodes pour nous aider à gérer les erreurs possibles.

GetderivedStateFromError ()

Nous utilisons getDerivedStateFromError() pour attraper toutes les erreurs lancées du composant enfant, puis nous l'utilisons pour mettre à jour l'état du composant.

 Class Errorboundary étend React.

  constructeur (accessoires) {
    super (accessoires);
    this.state = {
      Haserror: Faux
    };
  }

  statique GetderivedStateFromError (erreur) {
    return {Haserror: true};
  }

  rendre() {
    if (this.state.haserror) {
      Retour (
        <h1 id="Oups-quelque-chose-s-est-mal-passé">Oups, quelque chose s'est mal passé :(</h1>
      ));
    }

    Renvoyez ceci.props.children;
  }
}

Dans cet exemple, lorsqu'une erreur est jetée à partir du composant enfant, le composant ErrorBoundary affichera "oh, un problème s'est produit".

ComponentDidCatch ()

Bien que getDerivedStateFromError() convient à la mise à jour de l'état d'un composant en cas d'effets secondaires tels que la journalisation des erreurs, nous devons utiliser componentDidCatch() car il est appelé pendant la phase de validation, à laquelle le DOM a été mis à jour.

 ComponentDidCatch (erreur, info) {
  // Log des erreurs au service}

getDerivedStateFromError() et componentDidCatch() peuvent être utilisés dans le composant ErrorBoundary :

 Class Errorboundary étend React.

  constructeur (accessoires) {
    super (accessoires);
    this.state = {
      Haserror: Faux
    };
  }

  statique GetderivedStateFromError (erreur) {
    return {Haserror: true};
  }

  ComponentDidCatch (erreur, info) {
    // Log des erreurs au service}

  rendre() {
    if (this.state.haserror) {
      Retour (
        <h1 id="Oups-quelque-chose-s-est-mal-passé">Oups, quelque chose s'est mal passé :(</h1>
      ));
    }

    Renvoyez ceci.props.children;
  }
}

Ceci est le cycle de vie des composants React!

C'est une chose cool de comprendre comment les composants réactifs interagissent avec DOM. Il est facile de penser que une "magie" se produira, puis quelque chose apparaîtra sur la page. Mais le cycle de vie des composants React montre que cette folie est ordonnée, et elle vise à nous donner beaucoup de contrôle sur ce qui se passe à partir du moment où le composant atteint le Dom au moment où il disparaît.

Nous couvrons beaucoup de choses dans un espace relativement court, mais j'espère que cela vous donne une bonne idée de la façon dont React gère les composants et des capacités que nous avons à chaque étape du traitement. Si vous n'êtes pas clair sur quoi que ce soit présenté ici, n'hésitez pas à poser des questions et j'aimerais faire de mon mieux pour vous aider!

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!