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 po