ReactDOM.render 串联渲染链路 —— commit

参考文章：React技术揭秘——commit阶段

简要地回顾下

1. 初始化阶段时：构建 Fiber 树的根节点
2. render阶段 — beginWork: 深度遍历的方式，如果是初次mount，则从根节点开始构建整棵 Fiber 树；如果是 update 则是判断需要复用还是重新创建 Fiber 节点。
3. render阶段 — completeWork: 从Fiber树的叶子节点开始回溯到 Fiber 树的根节点，回溯的同时创建 Fiber 节点对应的真实 DOM 节点。回溯完成之后就有一棵离屏的，在内存中的真实DOM树了。而且此时还有一个 effectList 链表，这个链表中保存了哪些Fiber节点需要执行副作用（插入/删除/更新DOM节点，或者有 useEffect/useLayoutEffect 的函数组件）。

Commit 阶段的主要流程

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

commit 阶段的工作，简要概括就是如何把内存中的真实DOM树替换浏览器当前渲染的真实 DOM

commit 阶段的 before mutation

遍历 effectList，然后：

• 处理DOM节点渲染/删除后的 autoFocus、blur逻辑
• 调用getSnapshotBeforeUpdate生命周期钩子
• 调度useEffect（这个是异步的过程，在这个阶段调度但是是在 layout 阶段完成异步的执行）

commit 阶段的 mutation

也是遍历 effectList，然后根据effectTag调用不同的处理函数处理Fiber

Placement effectTag

表示该 Fiber节点对应的 DOM节点需要插入到页面中

1. 获取父级DOM节点
2. 获取该Fiber节点的DOM兄弟节点
3. 根据兄弟节点是否存在，来决定是执行 parentNode.insertBefore还是parentNode.appendChild操作

Update effectTag

意味着该Fiber节点需要更新。
对于 FunctionComponent 会执行 useLayoutEffect 中的销毁函数。即：

useLayoutEffect(() => {
  // ...一些副作用逻辑

  return () => {
    // ...这就是销毁函数
  }
})

Deletion effectTag

意味着该Fiber节点对应的DOM节点需要从页面中删除。

1. 对于 ClassComponent，会调用 componentWillUnmount 的生命周期钩子函数，从页面移除Fiber节点对应DOM节点
2. 解绑ref
3. 调度useEffect的销毁函数

commit 阶段的 layout

layout阶段也是遍历effectList，然后执行不同的操作

1. 在 before mutation 阶段调度的 useEffect，在此时异步执行
2. 根据当前是 mount 还是 update，分别调用 componentDidMount 和 componentDidUpdate，如果setState如果赋值了第二个参数回调函数，也会在此时调用。
3. 获取 DOM 实例然后更新对应的 ref
4. 切换 Fiber 树，之前在双缓存机制里也介绍了，内存中会新建一棵全新的 Fiber树，到这里所有工作都已经完成了。然后就可以切换成新的Fiber树了。