Renderer工作的阶段被称为commit阶段。commit阶段可以分为三个子阶段：

  • mutation阶段（执行DOM操作）

  • layout阶段（执行DOM操作后）

本节我们看看before mutation阶段（执行DOM操作前）都做了什么。

before mutation阶段的代码很短，整个过程就是遍历effectList并调用commitBeforeMutationEffects函数处理。

我们重点关注beforeMutation阶段的主函数commitBeforeMutationEffects做了什么。

大体代码逻辑：

整体可以分为三部分：

  1. 处理DOM节点渲染/删除后的 autoFocus、blur 逻辑。

  2. 调用getSnapshotBeforeUpdate生命周期钩子。

  3. 调度useEffect。

commitBeforeMutationEffectOnFiber是commitBeforeMutationLifeCycles的别名。

在该方法内会调用getSnapshotBeforeUpdate。

从Reactv16开始，componentWillXXX钩子前增加了UNSAFE_前缀。

究其原因，是因为Stack Reconciler重构为Fiber Reconciler后，render阶段的任务可能中断/重新开始，对应的组件在render阶段的生命周期钩子（即）可能触发多次。

这种行为和Reactv15不一致，所以标记为UNSAFE_。

为此，React提供了替代的生命周期钩子getSnapshotBeforeUpdate。

我们可以看见，getSnapshotBeforeUpdate是在commit阶段内的before mutation阶段调用的，由于commit阶段是同步的，所以不会遇到多次调用的问题。

在这几行代码内，scheduleCallback方法由Scheduler模块提供，用于以某个优先级异步调度一个回调函数。

在此处，被异步调度的回调函数就是触发useEffect的方法flushPassiveEffects。

我们接下来讨论useEffect如何被异步调度，以及为什么要异步（而不是同步）调度。

在flushPassiveEffects方法内部会从全局变量rootWithPendingPassiveEffects获取effectList。

在completeWork一节我们讲到，effectList中保存了需要执行副作用的Fiber节点。其中副作用包括

  • 插入DOM节点（Placement）
  • 删除DOM节点（Deletion）

除此外，当一个FunctionComponent含有useEffect或useLayoutEffect，他对应的Fiber节点也会被赋值effectTag。

在flushPassiveEffects方法内部会遍历rootWithPendingPassiveEffects（即effectList）执行effect回调函数。

如果在此时直接执行，rootWithPendingPassiveEffects === null。

那么rootWithPendingPassiveEffects会在何时赋值呢？

在上一节layout之后的代码片段中会根据rootDoesHavePassiveEffects === true?决定是否赋值rootWithPendingPassiveEffects。

所以整个useEffect异步调用分为三步：

  1. before mutation阶段在scheduleCallback中调度flushPassiveEffects
  2. layout阶段之后将effectList赋值给rootWithPendingPassiveEffects
  3. scheduleCallback触发flushPassiveEffects，flushPassiveEffects内部遍历rootWithPendingPassiveEffects

为什么需要异步调用

摘录自React文档effect 的执行时机 (opens new window)：

可见，useEffect异步执行的原因主要是防止同步执行时阻塞浏览器渲染。

经过本节学习，我们知道了在before mutation阶段，会遍历effectList，依次执行：

  1. 处理DOM节点渲染/删除后的 autoFocus、blur逻辑