Quatre étapes

  • Initialisation
  • En cours
  • Destruction
  • Gestion des erreurs(16.3Plus tard)
  1. Initialisation

    1. constructor
    2. static getDerivedStateFromProps()
    3. componentWillMount() / UNSAFE_componentWillMount()
    4. render()
    5. componentDidMount()
  2. Mise à jour

    propsOustateLes modifications apportées à peuvent entraîner des mises à jour des composants,La méthode suivante est appelée lors du rendu du composant:

    1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
    2. static getDerivedStateFromProps()
    3. shouldComponentUpdate()
    4. componentWillUpdate() / UNSAFE_componentWillUpdate()
    5. render()
    6. getSnapshotBeforeUpdate()
    7. componentDidUpdate()
  3. Destruction
    1. componentWillUnmount()
  4. Gestion des erreurs
    1. componentDidCatch()

Détails du cycle de vie

(1)constructor

  • React Le constructeur du composant est appelé avant d'être suspendu .
  • Appelezsuper(props),Utilisé pour transmettre le composant parentpropsLié à cette classe,Utiliserthis.propsJe l'aurai..
  • constructor Quelque chose devrait être fait pour initialiser ,Par exemple::Initialisationstate, Lier les gestionnaires d'événements aux instances de classe , Mais ne l'utilisez pas non plus. setState().

    Utiliser le scénario:

    • InitialisationstateDonnées
    • Définir la modification de la fonction thisPointage
      constructor(props) {
      super(props);
      this.state = {
      isLiked: props.isLiked
      };
      this.handleFun=this.handleFun.bind(this)
      }

(2)static getDerivedStateFromProps(nextProps, prevState)

React 16.3 Dans la version de getDerivedStateFromProps La plage de déclenchement est et 16.4^ C'est différent., Les principales différences sont les suivantes: setState Et forceUpdate Déclenchera - t - il ,Pour plus de détails, voir ceci Diagramme du cycle de vie .

Utiliser le scénario:

  • Base inconditionnelle prop Pour mettre à jour l'intérieur state,C'est - à - dire, tant qu'il y a des entrées prop Valeur, Mise à jour state
  • Seulement prop Valeur et state Les valeurs ne sont pas mises à jour en même temps state Valeur.
Class ColorPicker extends React.Component {
state = {
color: '#000000'
}
static getDerivedStateFromProps (props, state) {
if (props.color !== state.color) {
return {
color: props.color
}
}
return null
}
... // Sélectionner la méthode de couleur
render () {
.... // Afficher les couleurs et sélectionner les actions de couleur
}
}

Pure question. :

Maintenant, nous pouvons utiliser ce sélecteur de couleurs pour sélectionner les couleurs,En même temps, nous pouvons passer une valeur de couleur et afficher. Si nous passons une valeur de couleur , Réutiliser la méthode de sélection des couleurs à l'intérieur du composant , Nous verrons que les couleurs ne changent pas , A toujours été la valeur de couleur passée .

C'est une utilisation courante de ce cycle de vie bug. Pourquoi est - ce arrivé? bug Et alors?? Au début, j'ai dit: ,In React 16.4^ Dans la version de setState Et forceUpdate Et déclenchera ce cycle de vie ,Donc à l'intérieur state Après le changement, Encore une fois. getDerivedStateFromProps Méthodes,Et mettre state Valeur mise à jour vers prop.

Class ColorPicker extends React.Component {
state = {
color: '#000000',
prevPropColor: ''
}
static getDerivedStateFromProps (props, state) {
if (props.color !== state.prevPropColor) {
return {
color: props.color
prevPropColor: props.color
}
}
return null
}
... // Sélectionner la méthode de couleur
render () {
.... // Afficher les couleurs et sélectionner les actions de couleur
}
}

Attention:

  • Parce que ce cycle de vie est statique , En même temps, gardez - le comme une fonction pure , Ne pas provoquer d’effets indésirables .
  • Lors de l'utilisation de ce cycle de vie , Faites attention à ce qui arrive. prop Valeur et précédemment passée prop Comparer(C'est prop Les valeurs doivent être uniques , Ou utiliser un prop Valeur à comparer spécifiquement ).
  • Non utilisé getDerivedStateFromProps,Les composants peuvent être changés en mode complètement incontrôlable, Par les valeurs initiales et key Valeur pour atteindre prop Changement state Situation.

(3) componentWillMount() / UNSAFE_componentWillMount()

  • componentWillMount()SeraReact Versions futures (Officiellement 17.0)Rejeté.UNSAFE_componentWillMount() Appelé avant le montage du composant , Appelé dans cette méthode setState()Ça ne marchera pas., Parce qu'il est là. render()Précédemment appelé.

(4)render()

Quand il a été appelé,Il va calculerthis.propsEtthis.state, Et renvoie l'un des types suivants :

  • ReactÉlément.AdoptionjsxCréation,C'est possible.domÉlément, Peut également être un composant personnalisé par l'utilisateur .
  • Chaîne ou numéro. Ils vont rendre sous forme de noeuds de texte domMoyenne.
  • Portals.react 16 Nouvelles solutions proposées dans la version ,Les composants peuvent être montés directement àDOMN'importe où dans l'arbre.
  • null, Rien ne rend
  • Booléen. Et ne rend rien. .

Attention!:Retournull,false,ReactDOM.findDOMNode(this)Sera de retournull, Rien ne rend

render() La méthode doit être une fonction pure , Il ne devrait pas changer. state, Et ne peut pas interagir directement avec le Navigateur ,Les événements doivent être placés dans d'autres fonctions du cycle de vie.

SishouldComponentUpdate()Retourfalse,render()Ne sera pas appelé.

(5)componentDidMount

Appelé dès que le composant est assemblé .

Scénario d'application:

  • Habituellement ici ajaxDemande
  • Initialisation de tiers domBibliothèque

(6)componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)

Utilisation recommandéegetDerivedStateFromPropsSubstitution de fonctions

  • Lorsque le composant est monté ,Nouveau reçuprops Sera appelé plus tard
  • Si une mise à jour est nécessairestatePour répondrepropsChangement de, Peut être fait this.propsEtnextPropsComparaison, Et utilisé dans cette méthode this.setState().
  • Si le composant parent rend ce composant à nouveau,Même sipropsAucun changement, Cette méthode est également appelée .
  • React Ne pas initialiser dans le composant props Cette méthode est appelée lorsque .Appelezthis.setState Et ne déclenchera pas .

(7) shouldComponentUpdate(nextProps, nextState)

  • Rendre un nouveau propsOustateAvant,shouldComponentUpdate Sera appelé par défaut à true.
  • Cette méthode ne sera pas appelée lors de l'initialisation , Pas ici non plus. forceUpdate()Appelé quand.Retourfalse N'empêche pas les sous - composants de state Rendre à nouveau lorsque modifié .
  • SishouldComponentUpdate()Retourfalse,componentWillUpdate,renderEtcomponentDidUpdateNe sera pas appelé.

    Les autorités ne recommandent pas shouldComponentUpdate() En profondeur ou en utilisant JSON.stringify(), Il est très inefficace. , Et endommager les performances

//La prochaine foispropsEtstateDonnées
shouldComponentUpdate(nextProps,nextState){
if(nextProps.data==this.props.data){
return false
}
return true
}

(8) UNSAFE_componentWillUpdate(nextProps, nextState)

Rendre un nouveau stateOupropsHeure,UNSAFE_componentWillUpdateSera appelé.

Utilisez ceci comme une occasion de vous préparer avant que la mise à jour ne se produise. Cette méthode ne sera pas appelée lors de l'initialisation

Non disponible ici this.setState(), Vous ne pouvez pas non plus faire une action qui déclenche une mise à jour de la vue .Si une mise à jour est nécessairestateOuprops,AppelezgetDerivedStateFromProps

(9) getSnapshotBeforeUpdate()

render() La sortie suivante est rendue à DOMPrécédemment appelé.

  • Il permet à vos composants de saisir les valeurs actuelles avant qu'elles ne soient éventuellement modifiées( Comme la position de défilement ).
  • Toute valeur retournée par ce cycle de vie sera passée comme paramètre àcomponentDidUpdate().

(10) componentDidUpdate(prevProps, prevState, snapshot)

Appelé immédiatement après la mise à jour componentDidUpdate().

Cette méthode n'est pas utilisée pour le rendu initial .Lorsque le composant est mis à jour, Utilisez ceci comme une opportunité DOM. Tant que vous propsAvec l'ancienpropsComparer(Par exemple,SipropsAucun changement, Une demande de réseau peut ne pas être nécessaire ), C'est aussi un bon endroit pour faire des demandes en ligne .

Si le composant est mis en œuvre getSnapshotBeforeUpdate()Cycle de vie, La valeur qu'il renvoie sera la troisième “Snapshot”Paramètre passé àcomponentDidUpdate().Sinon,Ce paramètre estundefined.

(11) componentWillUnmount()

Appelé immédiatement avant que le composant ne soit déchargé et détruit.

Effectuer tout nettoyage nécessaire dans cette méthode , Par exemple, invalider un minuteur , Annuler la demande de réseau ou nettoyer à componentDidMount Tout auditeur créé dans .

(12) componentDidCatch(error, info)

La limite d'erreur estReactComponents,Peut être capturé n'importe où dans son arborescence de sous - composantsJavaScriptErreur, Enregistrez ces erreurs et affichez les retours en arrière UI, Au lieu d'un arbre de composants écrasé .Limite d'erreur lors du rendu,Erreur de capture dans l'approche du cycle de vie et le constructeur sous l'arbre entier.

Si le composant de classe définit cette méthode de cycle de vie , Ce sera la mauvaise limite. . Appelé dans setState()Vous pouvez capturer lesJavaScriptErreur, Et affiche une sauvegarde UI.Vous ne pouvez récupérer d'une exception inattendue qu'en utilisant les limites d'erreur; N'essayez pas de les utiliser pour contrôler le processus .

La limite d'erreur ne capture que les erreurs dans les composants suivants de l'arbre. La limite d'erreur elle - même ne peut pas saisir les erreurs

PureComponent

PureComponentSi vous recevez un nouvel attribut ou si vous changez l'état et l'attribut original、 Si l'état initial est le même , Je ne vais pas recommencer. renderC'est

Peut également être utilisé à l'intérieur shouldComponentUpdate,,Et.

Voulez - vous rendre à nouveau shouldComponentUpdate La valeur de retour de est le déterminant final .

import React, { PureComponent } from 'react'
class YourComponent extends PureComponent {
……
}

ref

Référence à l'Instance réelle du composant ,En fait, c'estReactDOM.render() Instances de composants retournées ,ref Peut être monté sur un composant ou domÉlément.

  • Montage des composants (class Composants déclarés )Oui.ref Représente une référence à une instance de composant .Je ne peux pas Utilisation sur les composants fonctionnels ref Propriétés, Parce qu'ils n'ont pas d'instances :
  • Monté surdom L'élément est spécifique domNoeud d'élément.
import React, { Component, createRef } from 'react'
import ReactDOM from 'react-dom' class App extends Component {
constructor() {
super()
// CréationinputRef
this.inputRef = createRef()
}
componentDidMount () {
console.log(this.inputRef.current) // <input type="text">
}
render () {
return (
<div>
{/* LiensrefEtdom */}
<input type="text" ref={this.inputRef} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')

react Plus d'articles sur le cycle de vie de ses composants

  1. React De Cycle de vie des composants

    React De Cycle de vie des composants Compris.1) L'objet composant passe par une phase spécifique du cycle de vie, de la création à la mort2) React L'objet composant contient une série de fonctions Hook (Fonction de rappel du cycle de vie), Rappel à un moment précis du cycle de vie 3) Nous définissons les composants , ...

  2. [React] Relations de conversion du cycle de vie des composants multiples

    Il y a quelque temps, ReactDévelopper, J'ai eu le temps de faire un résumé récemment. , Évitez de marcher dans la fosse à l'avenir. . Revenons à nos moutons,ReactLe cycle de vie estReact Base de fonctionnement des composants , Cet article résume principalement le parallélisme Multi - composants .Lors de la nidification, Relation de transition du cycle de vie . Cycle de vie Reac ...

  3. [En profondeurReact] 7.Cycle de vie des composants

    Le cycle de vie est divisé en trois étapes :Initialisation,En cours,Destruction.Dans l'ordre: Initialisation getDefaultProps():Object Global n'appelle qu'une seule fois , Par défaut généré pour la classe courante props, Le même nom qui sera passé par le composant parent propsÉcraser. g ...

  4. React ClassCycle de vie des composants

    Un..react Deux façons de définir un composant 1.Composant de fonction, Les composants de fonction simples sont les suivants: ,RéceptionProps,RendreDOM,Sans se concentrer sur d'autres logiques function Welcome(props) { return <h1& ...

  5. 【JAVASCRIPT】ReactApprendre-Cycle de vie des composants

    Résumé Organiser le processus de chargement des composants , Voir la documentation officielle pour plus de détails :https://facebook.github.io/react/docs/react-component.html mount Processus 1)constructo ...

  6. 【React】Cycle de vie des composants

    Phase d'initialisation getDefaultPropos:Appelé une seule fois, Partage des références entre les forces getInitialState: Initialiser l'état propre à chaque instance componentWillMount:render Dernière modification précédente ...

  7. React.js Petit livre Lesson20 - Cycle de vie des composants pour la phase de mise à jour

    Auteur: Une grosse barbe. Lien vers le texte original:http://huziketang.com/books/react/lesson20 Veuillez indiquer la source de la réimpression., Conserver les liens originaux et les informations de l'auteur . Nous avons appris des chapitres précédents , Montage d'un composant ...

  8. React Résumé du cycle de vie des composants

    React Résumé du cycle de vie des composants C'est écrit ci - dessous. , Convient uniquement à l'avant React.(React Le rendu de fond est également pris en charge , Et c'est un peu différent de l'avant. , Mais je ne l'ai pas utilisé. .) Fonction de corrélation En termes simples,React Component Par les lettres qu'il définit ...

  9. reactApprendre(6)—— Questions relatives au cycle de vie des composants

    Au cours de l'élaboration du projet,J'ai rencontré un problème: Le composant parent demande des données de fond , Les données sont reçues avec props Transmis aux sous - ensembles , Sous - ensembles selon les données reçues ,Afficher un contenu différent,En même temps, Les sous - composants eux - mêmes peuvent être basés sur click L'opération modifie l'affichage en fonction des données du composant parent ...

  10. React— Détails du cycle de vie des composants

    React— Détails du cycle de vie des composants De Le blog Ming Ming   http://blog.csdn.net/slandove/article/details/50748473 (Non original) Avis de copyright:Veuillez indiquer la source de la réimpression.,Huan. ...

Recommandation aléatoire

  1. centos7Allez.consul Installation de Clusters pour

    centos7Allez.consulInstallation ###Un. Télécharger Télécharger le fichier wget https://releases.hashicorp.com/consul/0.6.4/consul_0.6.4_linux_a ...

  2. quartzUtiliser(Un.)

    Les tâches programmées sont fréquentes dans les projets ,quartz Est un excellent cadre Open Source , Fournit un soutien pour les tâches programmées , Soutient également la persistance des tâches , Et fournit un support pour la base de données . D'abord, oui. quartz Faites une brève introduction , Avec un petit exemple . 1.En bas. ...

  3. OOA、OOD、OOP

      Examen OOA.OOD.OOP OOA Object-Oriented Analysis: Méthode d'analyse orientée objet C'est dans le processus de développement d'un système après l'enquête sur les activités du système, Analyser les problèmes selon la pensée orientée objet .OOA Et la structure ...

  4. ng-blur Événement d'exécution hors focus

    <label class="item item-input item-stacked-label"> <span class="input-label& ...

  5. ALV Colonne numérique moins avant (EDIT_MASKApplication)

    1. Créer une fonction personnalisée Affichage du nombre de points flottants FUNCTION conversion_exit_zsign_output.*"---------------------------------------- ...

  6. scrapy(Un.)Créer unscrapyProjets

    Ce projet a permis d'obtenir stack overflowLa question de,Utilisation de la languepython,CadrescrapyCadre,ChoisissezmongoDB En tant que base de données persistante ,redis Comme cache de données Le code source du projet peut se référer à mon github:https ...

  7. http Compréhension 304

    Original: ANGLAIS:http://www.cnblogs.com/ziyunfei/archive/2012/11/17/2772729.html Si le client envoie une vérification conditionnelle(Conditional Valid ...

  8. 【BZOJ 3294】[Cqoi2011] Mettez les pièces.

    Explication du problème: Une combinaison classique +dp Tout d'abord, f[i][j][k]Indique avantk Les couleurs occupent iD'accordjColonnes Un transfert est une énumération k Les couleurs occupent plusieurs lignes et colonnes Transfert par soi - même Et son ordre relatif à l'intérieur est incertain, donc multipliez - le par le nombre de combinaisons ...

  9. SpringBootInKotlinMise en œuvre(2.)

    Selon le modèle de développement actuel et certaines informations disponibles sur le Web,SpringBoot Nécessité de stratifier les activités et les opérations ,Généralement divisé encontroller.entity.service.respositoryIsostructure.En basKotlinExemples de sites Web officiels ...

  10. TempData[&quot;a&quot;]PlusieursAction Partage des données avant la méthode

    ViewData["a"]Accessible uniquement sur les pages de votre propre vue,Mais...TempData["a"]Peut être plusieursAction Partage des données avant la méthode ,Comme dans @{Html.RenderA ...