Maison >interface Web >js tutoriel >Quel est le cycle de vie des composants React Native ?
Cette fois je vais vous apporter quelle est la durée du cycle de vie des composants React Native et quelles sont les précautions du cycle de vie des composants React Native. Voici des cas pratiques. Jetons un coup d'oeil.
Voici une introduction au cycle de vie des composants React Native pour tout le monde. Je pense que cela sera d'une grande aide pour tout le monde lors de l'utilisation des composants React Native. Si vous êtes intéressé, jetons un coup d'œil.
Tout comme View dans le développement Android, les composants de React Native (RN) ont également un cycle de vie. Le soi-disant cycle de vie est l’état par lequel passe un objet depuis sa création initiale jusqu’à sa disparition finale. Comprendre le cycle de vie est la clé du développement rationnel. Le cycle de vie des composants RN est organisé comme suit
Comme le montre la figure, le cycle de vie des composants peut être grossièrement divisé en trois étapes :
La première étape : est la première étape de dessin du composant, comme indiqué dans la case supérieure en pointillés de la figure, où le chargement et l'initialisation du composant sont terminés
La deuxième étape ; : c'est lorsque le composant est l'étape d'exécution et d'interaction, comme indiqué dans la case en pointillés dans le coin inférieur gauche de la figure, les composants de cette étape peuvent gérer l'interaction de l'utilisateur ou recevoir des événements pour mettre à jour l'interface
void componentWillMount()Cette fonction est appelée après la création du composant et l'initialisation de l'état, mais avant que render() soit dessiné pour la première fois. Vous pouvez effectuer ici certaines opérations d'initialisation commerciale et vous pouvez également définir l'état des composants. Cette fonction n'est appelée qu'une seule fois pendant tout le cycle de vie. composantDidMount Une fois le composant dessiné pour la première fois, composantDidMount() sera appelé pour indiquer que le composant a été chargé. Le prototype de la fonction est le suivant :
void componentDidMount()Lorsque cette fonction est appelée, son DOM virtuel a été construit et vous pouvez commencer à obtenir les éléments ou sous-composants de cette fonction. Il convient de noter que le framework RN appelle d'abord componentDidMount() du composant enfant, puis appelle la fonction du composant parent. À partir de cette fonction, vous pouvez interagir avec d'autres frameworks JS, comme définir le timing setTimeout ou setInterval, ou lancer des requêtes réseau. Cette fonction n'est également appelée qu'une seule fois. Après cette fonction, il entre dans un état de fonctionnement stable et attend que l'événement soit déclenché. composantWillReceiveProps Si le composant reçoit de nouvelles propriétés (props), componentWillReceiveProps() sera appelé, et son prototype est le suivant :
void componentWillReceiveProps( object nextProps )Le paramètre d'entrée nextProps est la propriété qui sera définie, et les anciennes propriétés peuvent toujours être obtenues via this.props. Dans cette fonction de rappel, vous pouvez mettre à jour l'état de votre composant en appelant this.setState() en fonction du changement de l'attribut. L'appel de l'état de mise à jour ici est
sûr et ne déclenchera pas d'appel render() supplémentaire. Comme suit :
componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); }devraitComponentUpdate Lorsqu'un composant reçoit de nouveaux attributs et des changements d'état, il déclenchera un appel à ShouldComponentUpdate(...). Le prototype de la fonction est le suivant :
boolean shouldComponentUpdate( object nextProps, object nextState ). Le paramètre d'entrée nextProps est le même que la fonction componentWillReceiveProps ci-dessus nextState représente la valeur d'état que le composant est sur le point de mettre à jour. La valeur de retour de cette Par défaut, cette fonction renvoie toujours true pour garantir que l'interface utilisateur peut être mise à jour de manière synchrone lorsque les données changent. Dans les grands projets, vous pouvez surcharger cette fonction vous-même et déterminer si l'interface utilisateur doit être mise à jour en vérifiant les propriétés et l'état avant et après la modification, ce qui peut améliorer efficacement les performances de l'application.
componentWillUpdate
如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true,就会开始准更新组件,并调用 componentWillUpdate(),其函数原型如下:
void componentWillUpdate( object nextProps, object nextState )
输入参数与 shouldComponentUpdate 一样,在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。
componentDidUpdate
调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知,其函数原型如下:
void componentDidUpdate( object prevProps, object prevState )
因为到这里已经完成了属性和状态的更新了,此函数的输入参数变成了 prevProps 和 prevState。
componentWillUnmount
当组件要被从界面上移除的时候,就会调用 componentWillUnmount(),其函数原型如下:
void componentWillUnmount()
在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。
总结
到这里,RN 的组件的完整的生命都介绍完了,在回头来看一下前面的图,就比较清晰了,把生命周期的回调函数总结成如下表格:
生命周期 | 调用次数 | 能否使用 setSate() |
---|---|---|
getDefaultProps | 1(全局调用一次) | 否 |
getInitialState | 1 | 否 |
componentWillMount | 1 | 是 |
render | >=1 | 否 |
componentDidMount | 1 | 是 |
componentWillReceiveProps | >=0 | 是 |
shouldComponentUpdate | >=0 | 否 |
componentWillUpdate | >=0 | 否 |
componentDidUpdate | >=0 | 否 |
componentWillUnmount | 1 | 否 |
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
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!