认识

一、认识

---

React 内部有三个阶段, 分别为:

1. scheduler 调度阶段

2. render 阶段: render 阶段主要工作是: 构建Fiber树; 生成effectList。render 阶段以 DFS 深度优先 的顺序遍历 React Element, 如果有子节点, 遍历子节点, 如果没有子节点遍历兄弟节点。render 节点其实是一个递归的过程, 存在 递 和 归 两个阶段:

   • 递 对应 beginWork: 是向下调和的过程。就是由 fiberRoot 按照 child 指针逐层向下调和，期间会执行函数组件，实例类组件，diff 调和子节点，打不同effectTag。

   • 归 对应 completeWork: 是向上归并的过程，如果有兄弟节点，会返回 sibling兄弟，没有返回 return 父级，一直返回到 fiebrRoot ，期间可以形成effectList，对于初始化流程会创建 DOM ，对于 DOM 元素进行事件收集，处理style，className等。

3. commit 阶段: commit 阶段的主要工作是执行effectList，更新DOM，执行生命周期，获取ref等操作。

   • beforeMutation 阶段: 执行 DOM 操作前

   • mutation 阶段: 执行 DOM 操作

   • layout 阶段: 执行 DOM 操作后