这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
react16+以上的版本采用了新的设计架构，整体来说分为三层：
- Scheduler（调度器）：调度任务的优先级，高优任务优先进入Reconciler
- Reconciler（协调器）：构建Fiber数据结构，比对Fiber对象找出差异，记录Fiber对象要进行的dom操作。负责找出变化的组件
- Renderer（渲染器）：负责将变化的组件渲染到页面上
调度器
-
什么是调度器？
-
调度器是一种机制，判断浏览器是否有空余时间，从而来合适的调度js任务。
-
为什么要新加调度器呢？
-
在浏览器中加载js和渲染是一个互斥的关系，如果js在执行代码，那么渲染就会停止工作，而如果我们的js调用栈很长的话，就会导致长时间的渲染阻塞，造成的后果就是直观的表现为页面卡顿，渲染慢，用户体验差。正是为了解决这个问题，所以在react16+版本中采用了新的架构，增加了调度器。
调度的流程
首先要知道浏览器渲染是一帧一帧的进行的。
- 每个任务都会有各自的优先级，根据优先级进行调度；
- 在调度之前，判断当前任务是否过期，过期的话无须调度；
- 如果任务没有过期，就通过 requestAnimationFrame 启动定时器，在重绘前调用回调方法；
- 在回调方法中我们首先需要计算每一帧的时间以及下一帧的时间；
- 判断当前时间是否小于下一帧时间。如果小于的话就代表我们尚有空余时间去执行任务；如果大于的话就代表当前帧已经没有空闲时间了，这时候我们需要去判断是否有任务过期，过期的话不管三七二十一还是得去执行这个任务。如果没有过期的话，当前帧又没有时间，那就只能把这个任务丢到下一帧看能不能执行了
