01-react 渲染流程

原文链接
先上一张图，这是 React 团队作者 Dan Abramov 画的一张生命周期阶段图，可以看出 React 的生命周期主要分为两个阶段：render 阶段和 commit 阶段。
​
其中 commit 阶段又可以细分为 pre-commit 阶段和 commit 阶段；

react 16 架构

React 16 是重构了 React 15 的一个大版本；其相比 React 15 架构增加了 Scheduler
React16 架构可以分为三层：

• Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler
• Reconciler（协调器）—— 负责找出变化的组件
• Renderer（渲染器）—— 负责将变化的组件渲染到页面上

Scheduler

Schedule 是根据浏览器是否有剩余时间作为任务中断的标准，当浏览器有剩余时间时通知我们。然后根据优先级进行调度执行任务；
​

其实部分浏览器已经实现了这个API，这就是 requestIdleCallback。但是由于以下因素，React 放弃使用：

• 浏览器兼容性
• 触发频率不稳定，受很多因素影响。比如当我们的浏览器切换 tab 后，之前 tab 注册的 requestIdleCallback 触发的频率会变得很低

基于以上原因，React 实现了功能更完备的requestIdleCallback polyfill，这就是Scheduler。除了在空闲时触发回调的功能外，Scheduler还提供了多种调度优先级供任务设置。
​
render 与 commit 阶段统称为 work，即 React 在工作中。相对应的，如果任务正在 Scheduler 内调度，就不属于work。

Reconciler

Reconciliation 的内容主要是在 React 中如何去渲染和协调你的代码；Reconciler 采用 Fiber 架构，来实现异步可中断的更新；diff 算法就是发生在该阶段，为需要更新的 fiber 打上 effect tag；它主要有以下几个功能：

• 注册调度任务: 与调度中心(scheduler 包)交互, 注册调度任务 task, 等待任务回调.
• 执行任务回调: 在内存中构造出 fiber 树, 同时与与渲染器(react-dom)交互, 在内存中创建出与 fiber 对应的 DOM节点.
• 输出: 与渲染器(react-dom)交互, 渲染 DOM 节点

Reconciler 工作的阶段被称为 render 阶段。因为在该阶段会调用组件的 render 方法；

Render

Renderer 根据 Reconciler 构造的 Fiber 树结构，根据对应的 effect tag 同步执行对应的 DOM 操作。这里存在 mount 以及 update 的 render 阶段；后面会详细说这块；
​
Renderer 工作的阶段被称为 commit 阶段。

参考

• https://juejin.cn/post/6859528127010471949
• https://react.iamkasong.com/preparation/idea.html
• https://juejin.cn/post/6992588246785982494
• https://juejin.cn/post/7019254208830373902