hello,这里是潇晨,明天咱们来看下react生命周期在各个阶段是怎么执行的,在面试的过程中有没有遇到这个问题呢,大家也能够学习往期react源码体系文章哦,往期文章目录在文章结尾。

在之前的react源码介绍中,咱们能够将利用的渲染过程分为mount阶段(利用首次渲染)和update阶段(利用状态更新),无论在mount阶段还是update阶段,都会经验两个子阶段,一个是render阶段,一个是commit阶段。

  • mount时:

    1. render阶段会依据jsx对象构建新的workInProgressFiber树,不太理解Fiber双缓存的能够查看往期文章 Fiber架构,而后将相应的fiber节点标记为Placement,示意这个fiber节点须要被插入到dom树中,而后会这些带有副作用的fiber节点退出一条叫做Effect List的链表中。
    2. commit阶段会遍历render阶段造成的Effect List,执行链表上相应fiber节点的副作用,比方Placement插入,或者执行PassiveuseEffect的副作用)。将这些副作用利用到实在节点上
  • update时:

    1. render阶段会依据最新状态的jsx对象比照current Fiber,再构建新的workInProgressFiber树,这个比照的过程就是diff算法,diff算法又分成单节点的比照和多节点的比照,不太分明的同学参见之前的文章 diff算法 ,比照的过程中同样会经验收集副作用的过程,也就是将比照进去的差别标记进去,退出Effect List中,这些比照进去的副作用例如:Placement(插入)、Update(更新)、Deletion(删除)等。
    2. commit阶段同样会遍历Effect List,将这些fiber节点上的副作用利用到实在节点上

为什么要先讲rendermountupdate阶段的整体流程呢,这是因为react生命周期就是穿插在这些子阶段中执行的,来看一张图

  • render阶段:

    1. mount时:组件首先会经验constructorgetDerivedStateFromPropscomponnetWillMountrender
    2. update时:组件首先会经验componentWillReceivePropsgetDerivedStateFromPropsshouldComponentUpdaterender
    3. error时:会调用getDerivedStateFromError
  • commit阶段

    1. mount时:组件会经验componnetDidMount
    2. update时:组件会调用getSnapshotBeforeUpdatecomponnetDidUpdate
    3. unMount时:调用componnetWillUnmount
    4. error时:调用componnetDidCatch

其中红色的局部不倡议应用,须要留神的是commit阶段生命周期在mutation各个子阶段的执行程序,能够温习上一章

接下来依据一个例子来解说在mount时和update时更新的具体程序:

  • mount时:首先会依照深度优先的形式,顺次构建wip Fiber节点而后切换成current Fiber,在render阶段会顺次执行各个节点的constructorgetDerivedStateFromProps/componnetWillMountrender,在commit阶段,也就是深度优先遍历向上冒泡的时候顺次执行节点的componnetDidMount

相干参考视频解说:进入学习

  • update时:同样会深度优先构建wip Fiber树,在构建的过程中会diff子节点,在render阶段,如果返现有节点的变动,例如上图的c2,那就标记这个节点Update Flag,而后执行getDerivedStateFromPropsrender,在commit阶段会顺次执行节点的getSnapshotBeforeUpdatecomponnetDidUpdate