React 的视图渲染可以看做，UI = Fn(State);
React 这个函数 Fn 接受全局状态 State 作为参数，这个函数调用的结果就是我们当前视图的 UI。
在 React 的源码中 State 这部分负责计算出状态变化，Fn 负责将状态变化渲染在视图中。
- State 对应 Reconciler(diff)，负责找出变化的组件，也就是我们所说的 Render 阶段。
- Fn 对应 Renderer，负责将变化的组件渲染到页面上，也就是我们所说的 Commit 阶段。
生命周期
在 Render 阶段和 Commit 阶段中，会执行所有的生命周期函数。 根据阶段和状态进行划分，我们可以得到下图：
标红为已经在 React17 中被废弃了，替代它们的为标绿的部分，同时使用标红与标绿会报错。
在首屏渲染时，一个组件首先会调用 constructor，接下来会调用getDerivedStateFromProps/componentWillMount，然后调用 render，当整个 Render 阶段完成后会进入 Commit 阶段，当完成了对应的 DOM 渲染之后，最后调用 componentDidMount。
用户在调用比如 setState 更新状态时，我们会重新进入 Render 阶段，React 会通过深度优先遍历的方式创建一颗完整的Fiber 树，当 Reconciler(Diff 算法 )发现某个节点发生了变化时，会将这个节点进行标记，当整个 Reconciler 完成后，会进入 Commit 阶段，Commit 阶段会根据 Fiber 树的标记，对页面进行更新。当执行完以后，新创建的 Fiber 树会替换掉之前那一颗 Fiber 树。等待下一次 setState 再生成一颗新的 Fiber 树。
Render 阶段与 Commit 阶段传递的是一条包含了不同 Fiber 阶段的 Effect 链表。
参考资料
Last updated on