参考文章：React技术揭秘——commit阶段
简要地回顾下
- 初始化阶段时：构建 Fiber 树的根节点
- render阶段 — beginWork: 深度遍历的方式，如果是初次mount，则从根节点开始构建整棵 Fiber 树；如果是 update 则是判断需要复用还是重新创建 Fiber 节点。
- 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节点需要插入到页面中
- 获取父级DOM节点
- 获取该Fiber节点的DOM兄弟节点
- 根据兄弟节点是否存在，来决定是执行
parentNode.insertBefore还是parentNode.appendChild操作
Update effectTag
意味着该Fiber节点需要更新。
对于 FunctionComponent 会执行 useLayoutEffect 中的销毁函数。即：
useLayoutEffect(() => {
// ...一些副作用逻辑
return () => {
// ...这就是销毁函数
}
})
Deletion effectTag
意味着该Fiber节点对应的DOM节点需要从页面中删除。
- 对于 ClassComponent，会调用 componentWillUnmount 的生命周期钩子函数，从页面移除Fiber节点对应DOM节点
- 解绑ref
- 调度useEffect的销毁函数
commit 阶段的 layout
layout阶段也是遍历effectList，然后执行不同的操作
- 在 before mutation 阶段调度的 useEffect，在此时异步执行
- 根据当前是 mount 还是 update，分别调用 componentDidMount 和 componentDidUpdate，如果setState如果赋值了第二个参数回调函数，也会在此时调用。
- 获取 DOM 实例然后更新对应的 ref
- 切换 Fiber 树，之前在双缓存机制里也介绍了，内存中会新建一棵全新的 Fiber树，到这里所有工作都已经完成了。然后就可以切换成新的Fiber树了。
