面试官: 说说你对 react 生命周期的理解
面试官:说说你对 react 生命周期的理解
hello,这里是潇晨,今天我们来看下react
生命周期在各个阶段是怎样执行的,在面试的过程中有没有遇到这个问题呢,大家也可以学习往期react
源码体系文章哦,往期文章目录在文章结尾。
在之前的react
源码介绍中,我们可以将应用的渲染过程分为mount
阶段(应用首次渲染)和update
阶段(应用状态更新),无论在mount
阶段还是update
阶段,都会经历两个子阶段,一个是render
阶段,一个是commit
阶段。
mount
时:在
render
阶段会根据jsx
对象构建新的workInProgressFiber
树,不太了解Fiber
双缓存的可以查看往期文章 Fiber架构,然后将相应的fiber
节点标记为Placement
,表示这个fiber
节点需要被插入到dom
树中,然后会这些带有副作用的fiber
节点加入一条叫做Effect List
的链表中。在
commit
阶段会遍历render
阶段形成的Effect List
,执行链表上相应fiber
节点的副作用,比如Placement
插入,或者执行Passive
(useEffect
的副作用)。将这些副作用应用到真实节点上update
时:在
render
阶段会根据最新状态的jsx
对象对比current Fiber
,再构建新的workInProgressFiber
树,这个对比的过程就是diff
算法,diff
算法又分成单节点的对比和多节点的对比,不太清楚的同学参见之前的文章 diff算法 ,对比的过程中同样会经历收集副作用的过程,也就是将对比出来的差异标记出来,加入Effect List
中,这些对比出来的副作用例如:Placement
(插入)、Update
(更新)、Deletion
(删除)等。在
commit
阶段同样会遍历Effect List
,将这些fiber
节点上的副作用应用到真实节点上
为什么要先讲render
在mount
和update
阶段的整体流程呢,这是因为react
生命周期就是穿插在这些子阶段中执行的,来看一张图
render
阶段:mount
时:组件首先会经历constructor
、getDerivedStateFromProps
、componnetWillMount
、render
update
时:组件首先会经历componentWillReceiveProps
、getDerivedStateFromProps
、shouldComponentUpdate
、render
error
时:会调用getDerivedStateFromError
commit
阶段mount
时:组件会经历componnetDidMount
update
时:组件会调用getSnapshotBeforeUpdate
、componnetDidUpdate
unMount
时:调用componnetWillUnmount
error
时:调用componnetDidCatch
其中红色的部分不建议使用,需要注意的是commit
阶段生命周期在mutation
各个子阶段的执行顺序,可以复习上一章
接下来根据一个例子来讲解在mount
时和update
时更新的具体顺序:
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
评论