总结

从React的任务调度整个流程看完，我们发现其主要分为两个大步骤,5个小步骤

• render阶段

  • beginWork
  • completeWork

• commit阶段

  • commitBeforeMutationEffects
  • commitMutationEffects
  • commitLayoutEffects

下面我们总结一下各个步骤的主要作用，然后根据 class组件生命周期、函数式组件的Hooks，来了解一下这些方法各在哪一个步骤进行执行

render阶段

这是一个可以被打断的JS执行阶段，在这个阶段主要是从 scheduleUpdateOnFiber(fiber,lane,eventTime)开始进行深度优先的遍历，并生成FiberNode树的过程，在这个过程中又通过向上收集的过程，生成各个FiberNode对应的 DOM。在这个过程中涉及到以下几个结构或者属性

• lanes、childLanes 用于更新操作中向上收集的方式标记从出发更新的FiberNode到FiberRootNode的分支线
• flags、subtreeFlags 用于标记FiberNode树中有副作用的节点树(flags表明副作用的类型)
• updateQueue
• firstEffect、lastEffect、nextEffect

beginWork

主要是通过workInProgress去构建或者复用FiberNode的过程，从而生成新的FiberNode树。

‍

completeWork

在beginWork深度优先遍历的过程中，通过向上收敛的顺序，根据 lanes、childLanes过滤可以复用或者优先级不匹配的FiberNode的节点，从而生成其对应的 DOM元素和 childs（子DOM）,并将其赋给 fiberNode.stateNode。（DOM暂时在内存中）

在这个创建DOM的过程中会产生副作用(effect)，也是这个过程将产生的副作用通过firstEffect、lastEffect、nextEffect的单链表结构存在fiberNode上

commit阶段

这是CommitContext执行栈环境的执行流程，也是整个FiberNode进行渲染的流程。

在这个流程中主要是做

1. 副作用的处理
2. DOM从内存更新到浏览器中
3. 执行DOM渲染前后的钩子函数等

commitBeforeMutationEffects

Commit阶段对于副作用的第一次遍历处理过程。

在这个阶段每一个FiberNode对应的DOM元素已经生成，但是没有插入到浏览器中（保存在内存中），

其主要作用如下：

1. 组件的Blur事件
2. 处理 Class组件 getSnapshotBeforeUpdate() 生命周期方法副作用
3. 处理 useEffect 类型的 effect 副作用( 立即执行么？)

commitMutationEffects

Commit阶段对于副作用的第二次遍历处理过程。

在这个阶段主要就是将DOM元素更新到浏览器中。

其主要作用如下：

1. 将DOM元素更新到浏览器中
2. ref.current 的解绑
3. useLayoutEffect 销毁函数的回调
4. 原生标签元素通过 updateQueue 进行属性的更新

commitLayoutEffects

Commit阶段对于副作用的第三次遍历处理过程。

在这个阶段主要就是执行DOM插入完成后的收尾工作。

其主要作用如下：

1. ref.current 的更新

2. Class组件类型：

   • 初始渲染 - componentDidMount 生命周期
   • 更新渲染 - componentDidUpdate 生命周期

3. 函数式组件类型：

   • useLayoutEffect create函数回调

‍

生命周期及Hooks

​