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

• La troisième étape : Oui Dans l'étape de désinstallation et de mort des composants, comme indiqué dans l'encadré en pointillés dans le coin inférieur droit de la figure, certains travaux de nettoyage des composants sont effectués ici.

Cycle de vie

Fonction de rappel

Ensuite, nous présenterons en détail chaque fonction de rappel dans le cycle de vie.

getDefaultProps

Avant la création du composant, getDefaultProps() sera appelé en premier. Il s'agit d'un appel global, à proprement parler, cela ne fait pas partie du cycle de vie du composant. Lorsqu'un composant est créé et chargé, getInitialState() est d'abord appelé pour initialiser l'état du composant.

composantWillMount

Ensuite, pour préparer le chargement du composant, composantWillMount() sera appelé, et son prototype est le suivant :

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

fonction détermine si le composant doit être mis à jour. Si c'est vrai, cela signifie qu'il doit être mis à jour et poursuivre le processus de mise à jour suivant. Sinon, il ne sera pas mis à jour et entrera directement dans l'état d'attente.

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!