4

react源码解析11.生命周期调用顺序

2 years ago

source link: https://segmentfault.com/a/1190000041127361
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

react源码解析11.生命周期调用顺序

视频讲解（高效学习）：进入学习

往期文章：

1.开篇介绍和面试题

2.react的设计理念

3.react源码架构

4.源码目录结构和调试

5.jsx&核心api

6.legacy和concurrent模式入口函数

10.commit阶段

11.生命周期

12.状态更新流程

15.scheduler&Lane

16.concurrent模式

19.手写迷你版react

20.总结&第一章的面试题解答

各阶段生命周期执行情况

函数组件hooks的周期会在hooks章节讲解，这一章的使命周期主要针对类组件，各阶段生命周期执行情况看下图：

react源码11.1

render阶段：
1. mount时：组件首先会经历constructor、getDerivedStateFromProps、componnetWillMount、render
2. update时：组件首先会经历componentWillReceiveProps、getDerivedStateFromProps、shouldComponentUpdate、render
3. error时：会调用getDerivedStateFromError
commit阶段
1. mount时：组件会经历componnetDidMount
2. update时：组件会调用getSnapshotBeforeUpdate、componnetDidUpdate
3. unMount时：调用componnetWillUnmount
4. error时：调用componnetDidCatch

其中红色的部分不建议使用，需要注意的是commit阶段生命周期在mutation各个子阶段的执行顺序，可以复习上一章

接下来根据一个例子来讲解在mount时和update时更新的具体顺序：

react源码11.2

react源码11.3

mount时：首先会按照深度优先的方式，依次构建wip Fiber节点然后切换成current Fiber，在render阶段会依次执行各个节点的constructor、getDerivedStateFromProps/componnetWillMount、render，在commit阶段，也就是深度优先遍历向上冒泡的时候依次执行节点的componnetDidMount
update时：同样会深度优先构建wip Fiber树，在构建的过程中会diff子节点，在render阶段，如果返现有节点的变化，例如上图的c2，那就标记这个节点Update Flag，然后执行getDerivedStateFromProps和render，在commit阶段会依次执行节点的getSnapshotBeforeUpdate、componnetDidUpdate

Recommend

About Joyk

Aggregate valuable and interesting links.
Joyk means Joy of geeK