React16 架构可以分为三层：
- Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入 Reconciler
- Reconciler (协调器) —— 负责找出变化的组件
- Renderer （渲染器）—— 将发生变化的组件渲染到页面上
可以看到，相比与老版的 React（React15），React16 中新增了 Scheduler（调度器），接下来了解一下它。
Scheduler（调度器）
既然我们以浏览器是否有剩余时间作为任务的中断标准，那么我们需要一种机制，当浏览器有剩余时间时通知我们。
其实部分浏览器已经实现了这个 API，就是
requestIdleCallback。但是由于一下的原因，React 放弃使用：- 浏览器兼容性
- 触发频率不稳定，受很多因素的影响。比如当我们的浏览器切换 tab 之后，之前 tab 注册的 requestIdleCallback 触发的频率会变得很低
基于以上的原因，React 实现了功能更加完备的
requestIdleCallback polyfill，这就是 Scheduler 。除了在空闲实现触发回调的功能外，Scheduler 还提供了多种调度优先级供任务设置。Scheduler🔗是独立于 react 的库
Reconciler（协调器）
我们知道，在老版 React (React 15)中 Reconciler 是递归处理虚拟 DOM 的。那我们看看 React16 版本中的 Reconciler 做了哪些改进呢？🔗
我们可以看见，更新工作从递归变成了可中断的循环过程。每次循环都会调用 shouldYield 判断当前是否有剩余时间。
那么 React16 是如何解决中断更新时 DOM 渲染不完全的问题呢？
在 React16 中，Reconciler 与 Renderer 不再是交替工作。当 Scheduler 将任务交给 Reconciler 后，Reconciler 会为变化的虚拟 DOM 打上代表增、删、改的标记，类似于这样：
全部的标记见这里🔗
整个 Scheduler 与 Reconciler 的工作都在内存中进行。只有当所有组件都完成 Reconciler 的工作，才会统一交给 Renderer。
你可以在这里🔗看到 React 官方对 React16 新 Reconciler 的解释
Renderer（渲染器）
Renderer 根据 Reconciler 为虚拟 DOM 打的标记，同步执行对应的 DOM 操作。
在此，引用一节中使用的 demo
demo code
在 React16 架构中整个更新流程调整为：
其中红色框中的步骤是随时可以被打断的，参考一下原因：
- 有其他更高优的任务需要先更新
- 当前帧没有剩余时间
由于红色框中的工作都是在内存当中去完成的，不会更新页面上的 DOM，所以即使反复的中断，用户也不会看见更新不完整的 DOM。
实际上，由于 Scheduler 和 Reconciler 都是与平台无关的，所以 React 为他们单独发了一个包：React-Reconciler🔗 。你可以使用这个包实现自己的一个 ReactDOM，
总结
本章主要学习 React16 的新架构，采用了新的 Reconciler，Reconciler 内部采用了 Fiber 的架构。
思考：Fiber 是什么？他和 Reconciler 或者说和 React 之间是什么关系？