Share
Les composants de réaction encapsulent des parties de l'interface utilisateur. L’interface utilisateur complète de votre application React est rendue sous la forme d’une arborescence de nombreux composants imbriqués. Selon le flux d'applications, les composants individuels doivent effectuer certaines tâches avant et après le rendu, ainsi qu'avant et après la mise à jour..
Enfin, le nettoyage et la gestion des erreurs sont également importants. React fournit une multitude de méthodes de cycle de vie que vous pouvez remplacer et injecter votre propre logique au bon endroit. Dans ce didacticiel, vous découvrirez le cycle de vie d’un composant React du berceau au tombeau, les méthodes disponibles à chaque étape et le moment approprié pour les remplacer..
Notez que j'utilise le style de classes ES6 moderne dans ce tutoriel..
J'utiliserai un composant appelé PopularBar pour illustrer toutes les méthodes du cycle de vie et leur comportement. Le code source complet est disponible sur GitLab.
La barre populaire contient deux autres composants appelés ClickCounter. Chaque ClickCounter Le composant contient un bouton avec un emoji et affiche le nombre de fois où il a été cliqué, ajouté à la propriété count qu'il reçoit de son hôte. Voici la rendre() méthode de ClickCounter:
Accentsconagua
render () return ( let clickCount = this.state.clickCount + 1 this.setState (clickCount: clickCount)> this.getTotal () < 100 ? this.getTotal() : "99+" ) Le composant PopularBar restitue deux composants ClickCounter avec emojis à la hausse et à la baisse. Notez que si le "show" prop est faux, il rend un div vide. Ce sera important plus tard, lorsque nous discuterons du montage et du démontage.
render () if (! this.props.show) return () revenir ()
Les composants React existent lorsqu'ils sont rendus par un composant parent ou par l'application racine. Mais avant qu'un composant puisse être rendu, il doit être construit (une fois seulement) et monté dans le DOM virtuel (chaque fois qu'il est ajouté au DOM virtuel)..
L'ordre des événements est que le composant est d'abord construit, ensuite le composantWillMount () méthode est appelée, le composant est monté dans le DOM virtuel, puis le composantDidMount ()est appelé. Cela vous donne de nombreuses possibilités pour effectuer différents types d’initialisation..
Le constructeur d'un composant sera appelé une fois par application (si vous actualisez la page dans votre navigateur, elle est considérée comme une nouvelle application). Voici le constructeur du composant PopularBar. Il ne fait vraiment rien sauf appeler super(), qui est requis et connectez-vous à la console.
La classe PopularBar étend Component constructor () super () console.log ('--- le constructeur de PopularBar est ici!')Le constructeur de ClickCounter initialise son clickCount Etat à zéro:
La classe ClickCounter étend Component constructeur (props) super (props) this.state = clickCount: 0 console.log (props.emoji + '=== le constructeur ClickCounter est ici!')
C'est un exemple parfait d'initialisation qui doit être effectuée une fois par application. Si un composant ClickCounter est monté plusieurs fois, il doit conserver son nombre de clics..
le composantWillMount () La méthode est appelée avant le montage du composant, il n’ya donc pas encore de composant. En général, il n’ya pas grand chose à faire à ce stade, à moins que vous n’ayez une initialisation spéciale qui se produit chaque fois que le composant est monté, mais même cela peut attendre. composantDidMount ()méthode.
Voici les implémentations de méthodes pour PopularBar et ClickCounter:
// PopularBar composantWillMount () console.log ('--- PopularBar va monter. Yay!') // ClickCounter composantWillMount () console.log (this.props.emoji + = == ClickCounter va monter. Yay ! ') Tu peux appeler this.setState () ici si tu veux. Les accessoires ne sont évidemment pas accessibles.
Ici, le composant est déjà monté et vous pouvez effectuer tout travail nécessaire pour accéder au composant dans le contexte du DOM virtuel. Voici les implémentations de méthodes pour PopularBar et ClickCounter. Le composant existe déjà, vous pouvez donc accéder à ses propriétés (accessoires) et les afficher.
composantDidMount () console.log ('--- PopularBar a effectivement monté. upCount:' + this.props.upCount + ', downCount:' + this.props.downCount) // ClickCounter composantDidMount () console.log ( this.props.emoji + '=== ClickCounter a monté. compte:' + this.props.count) Pour résumer la section de montage, voyons l’ordre des événements dans PopularBar et les deux composants ClickCounter qu’il contient. Pour votre commodité, j’affiche les émoticônes pour chaque ClickCounter, afin qu’elles puissent être distinguées..
--- Le constructeur de PopularBar est ici! --- PopularBar va monter. Yay! Construct === Le constructeur ClickCounter est arrivé! 👍 === ClickCounter va monter. Yay! Construct === Le constructeur ClickCounter est arrivé! 👎 === ClickCounter va monter. Yay! 👍 === ClickCounter a monté. count: 5 👎 === ClickCounter a été monté. compte: 8 --- PopularBar est monté. upCount: 5, décroissant: 8
Premièrement, le PopularBar est construit et son composantWillMount () méthode est appelée. Ensuite, le constructeur et composantWillMount () les méthodes de chaque composant ClickCounter sont appelées, suivies de la composantDidMount () appels aux deux composants ClickCounter. Finalement, le composantDidMount () méthode de PopularBar est appelée. Globalement, le flux est imbriqué où tous les sous-composants doivent être entièrement montés avant que leur composant conteneur soit complètement monté.
Une fois que le composant est monté, il peut être rendu. De temps en temps, l'état du composant ou des accessoires qu'il reçoit de son conteneur peut changer. De tels changements conduisent à un nouveau rendu, mais le composant a la possibilité d'être notifié et même de contrôler si le rendu doit avoir lieu ou non..
Il y a quatre méthodes impliquées dans le processus de mise à jour, et je les couvrirai dans l'ordre.
le composantWillReceiveProps () La méthode est appelée lorsque de nouveaux accessoires sont reçus du conteneur. Vous avez accès aux accessoires actuels via this.props et aux prochains accessoires via le nextProps paramètre. Voici la composantWillReceiveProps () méthode de ClickCounter.
composantWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter recevra les props.' + 'next props:' + nextProps.count)
Vous avez ici la possibilité de vérifier quels accessoires ont changé et de modifier l’état du composant si vous le souhaitez. C'est ok d'appeler this.setState () ici.
le shouldComponentUpdate () est une méthode clé. Il est appelé lorsque de nouveaux accessoires sont reçus (après composantWillReceiveProps () est appelé) ou après que l’état du composant ait été modifié ailleurs. Si vous n'implémentez pas cette méthode, le composant sera rendu à chaque fois..
Mais si vous l'implémentez et que vous retournez 'false', le composant et ses composants enfants ne seront pas rendus. Notez que si l’état des composants enfants est modifié, ils seront rendus de nouveau, même si vous retournez toujours 'false' à partir de celui du parent. shouldComponentUpdate ().
Vous avez accès ici aux prochains accessoires et au prochain état, vous avez donc toutes les informations nécessaires pour prendre une décision. Le composant ClickCounter affiche 99+ lorsque son nombre dépasse 99; il ne doit donc être mis à jour que si le nombre est inférieur à 100. Voici le code:
shouldComponentUpdate (nextProps, nextState) let currTotal = this.getTotal () let shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
le composantWillUpdateMethod () est appelé après le composant shouldComponentUpdate () seulement si shouldComponentUpdate () retourné vrai. À ce stade, vous avez les deux accessoires suivants et l'état suivant. Vous ne pouvez pas modifier l'état ici, car cela entraînera shouldComponentUpdate () être rappelé.
Voici le code:
composantWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter mettra à jour' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount)
Enfin, après le rendu, le composantDidUpdate () méthode est appelée. C'est ok d'appeler this.setState () ici parce que le rendu du changement d'état précédent est déjà terminé.
Voici le code:
composantDidUpdate () console.log (this.props.emoji + '=== ClickCounter a mis à jour')
Voyons les méthodes de mise à jour en action. Je vais provoquer deux types de mises à jour. Tout d'abord, je clique sur le bouton pouce en l'air pour déclencher un changement d'état:
--- Le constructeur de PopularBar est ici! PopularBar.js: 10 --- PopularBar va monter. Yay! PopularBar.js: 14 👍 === Le constructeur ClickCounter est arrivé! 👍 === ClickCounter va monter. Yay! Construct === Le constructeur ClickCounter est arrivé! 👎 === ClickCounter va monter. Yay! 👍 === ClickCounter a monté. count: 5 ClickCounter.js: 20 👎 === ClickCounter a été monté. count: 8 ClickCounter.js: 20 --- PopularBar est monté. upCount: 5, downCount: 8 👍 === ClickCounter doit être mis à jour 👍 === ClickCounter mettra à jour nextProps.count: 5 nextState.clickCount: 1 === ClickCounter a mis à jour
Notez que le nextState.clickCount est 1, ce qui déclenche le cycle de mise à jour. La prochaine mise à jour sera provoquée par le parent qui passe de nouveaux accessoires. Pour faciliter cela, je vais ajouter une petite fonction qui se déclenche toutes les 5 secondes et incrémente le compte de 20. Voici le code dans le composant principal de l'App qui contient le PopularBar. Le changement se propagera jusqu'au ClickCounter.
La classe App étend le composant constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind (this), 5000 ) everyFiveSeconds () let state = this.state state.upCount + = 20 this.setState (state)
Voici la sortie. Notez que le ClickCounter willReceiveProps () la méthode a été appelée et la nextState.clickCount reste à zéro, mais nextProps.Count est maintenant 25.
--- Le constructeur de PopularBar est ici! --- PopularBar va monter. Yay! Construct === Le constructeur ClickCounter est arrivé! 👍 === ClickCounter va monter. Yay! Construct === Le constructeur ClickCounter est arrivé! 👎 === ClickCounter va monter. Yay! 👍 === ClickCounter a monté. count: 5 👎 === ClickCounter a été monté. compte: 8 --- PopularBar est monté. upCount: 5, downCount: 8 === ClickCounter recevra des accessoires. accessoires suivants: 25 👍 === ClickCounter devrait mettre à jour 👍 === ClickCounter mettra à jour nextProps.count: 25 nextState.clickCount: 0
Les composants peuvent être démontés et remontés, et des erreurs peuvent survenir pendant le cycle de vie d'un composant..
Si un composant n'est pas rendu par son conteneur, il est démonté du DOM virtuel et du composant non monté. composantWillUnmount () méthode est appelée. PopularBar ne rendra pas ses sous-composants ClickCounter si la propriété show est false. Le composant App restitue le PopularBar et transmet l'accessoire en fonction de la case à cocher.
Voici l'application rendre() méthode:
render () return ()Bar populaire
Lorsque l'utilisateur désélectionne la case à cocher, PopularBar est toujours restitué, mais il ne restitue pas ses composants enfants, qui sont démontés. Voici le code et la sortie:
composantWillUnmount () console.log (this.props.emoji + '=== ClickCounter sera démonté :-(') Sortie: 👍 === ClickCounter sera démonté :-( 👎 === ClickCounter sera démonté :-( Il n'y a pas composantDidUnmount () méthode car il n'y a pas de composant à ce stade.
le composantDidCatch () Cette méthode a été ajoutée récemment dans React 16. Elle est conçue pour aider lors d’une erreur de rendu qui entraînait auparavant la production de messages d’erreur obscurs. Maintenant, il est possible de définir des composants de limite d'erreur spéciaux qui encapsulent tout composant enfant susceptible de générer des erreurs, et le composant de limite d'erreur ne sera rendu que si l'erreur s'est produite..
Les composants React ont un cycle de vie bien défini et des méthodes spéciales vous permettent d'interagir avec votre logique et de prendre des mesures, de contrôler l'état à un niveau très fin et même de gérer les erreurs..
La plupart du temps, cela n’est pas nécessaire, et vous pouvez simplement passer des accessoires et mettre en œuvre la rendre() méthode, mais il est bon de savoir que dans des circonstances plus spécialisées, vous ne serez pas laissé regarder fixement une boîte noire.
React a acquis une popularité croissante au cours des deux dernières années. En fait, un certain nombre d’articles sur le marché sont disponibles à l’achat, à l’examen, à la mise en oeuvre, etc. Si vous recherchez des ressources supplémentaires autour de React, n'hésitez pas à les consulter..
