Cet article a participé à l'événement "Newcomer Creation Ceremony" pour commencer ensemble la route de la création d'or.
avant-propos
Le cycle de vie de réaction est également une question courante dans l'interview de réaction. Si nous le maîtrisons, nous pouvons avoir de meilleures idées pour résoudre le problème du rendu des composants de réaction. Aujourd'hui, nous combinerons la forme d'images et d'analyses, et expliquerons la vie de réaction cycle dans une langue facile à comprendre. Je crois que vous pourrez gagner quelque chose à le lire patiemment.
1. L'ancien cycle de vie
1.1 Phase d'initialisation et de montage
- Définissez les propriétés par défaut.
- Le constructeur constructeur, super exécute, définit l'état initialisé.
- componentWillMount s'exécute pour la première fois.
- rendre Le premier rendu.
- componentDidMount est exécuté, et une seule fois à l'initialisation .
1.2 Phase d'exploitation
1.2.1 Lorsque le composant parent est mis à jour
- componentWillReceiveProps est exécuté et les paramètres ont des accessoires avant et après la mise à jour du composant parent.
- Si ComponentUpdate est exécuté, vous pouvez définir s'il faut continuer le rendu en interne, vous pouvez bloquer la mise à jour du rendu du composant ici.
- componentWillUpdate est exécuté et si shouldComponentUpdate n'est pas bloqué, il commence à préparer la mise à jour.
- render s'exécute, rendant le composant avec le nouvel état.
- componentDidUpdate est exécuté, qui est exécuté après le rendu du composant de mise à jour.
1.2.2 état propre changement d'état
Si son propre état change, componentWillReceiveProps ne sera pas exécuté.
Étant donné que la mise à jour n'est pas causée par des accessoires externes , les autres sont les mêmes que les quatre dernières étapes ci-dessus.
componentWillReceiveProps est exécuté et les paramètres ont des accessoires avant et après la mise à jour du composant parent.- Si ComponentUpdate est exécuté, vous pouvez définir s'il faut continuer le rendu en interne, vous pouvez bloquer la mise à jour du rendu du composant ici.
- componentWillUpdate est exécuté et si shouldComponentUpdate n'est pas bloqué, il commence à préparer la mise à jour.
- render s'exécute, rendant le composant avec le nouvel état.
- componentDidUpdate est exécuté, qui est exécuté après le rendu du composant de mise à jour.
1.3 Phase de destruction
N'en exécuter qu'un seul.
- componentWillUnmount est souvent utilisé pour détruire les temporisateurs qui ne seront pas automatiquement détruits avec le composant.
2. Nouveau cycle de vie
2.1 La phase de destruction reste inchangée
Toujours un componentWillUnmount.
2.2 getDerviedStateFromProps
À partir de l'ancien cycle de vie, vous pouvez voir que les crochets avant l'exécution du rendu ont
- composantWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
让我们想想在render之前执行的钩子能有什么作用？
shouldComponentUpdate控制是否更新在很多场合有用，比如我们不希望没有受到父组件props影响的组件由于父组件更新而被迫更新。所以保留
根据props决定state？这个功能我们是需要的，就是原来componentWillReceiveProps做的事。
剩下的我们原来是用来调用异步ajax请求数据？显然有问题，因为可能会导致异步ajax无故多次调用，更何况在初始化第一次render之后的有且只执行一次的componentDidMount中调用异步请求明显更加合理。
由此可见我们在render前只需要两个钩子就够了，除了shouldComponentUpdate之外剩下三个钩子被静态方法getDerviedStateFromProps代替。
2.3 getSnapshotBeforeUpdate
原来只是简单的用render前后的componentWillUpdate和componentDidUpdate来判断更新前后，现在我们知道componentWillUpdate被删除了（原因在上文）。
所以不应该简单用render来表示更新这个过程，所以新的周期中render和react更新dom区分开了。
并且在它们中间加了一个getSnapshotBeforeUpdate，可以判断更新前的dom状态。
2.4 版本16.4之后
后来发现了一些问题，认为不应该有更新过程跳过getDerviedStateFromProps，因此在16.4+修改了这点
尾言
鸣谢 图片来自aermin的博客
Si vous pensez que cet article vous est utile, veuillez aimer et vous abonner. Si vous avez des erreurs ou des suggestions, vous pouvez laisser un message, merci ~