React新旧框架
React快速响应的制约和解决方案
React的关键就是“快速响应”，那么制约“快速响应”的因素是什么呢？主要有一下两点。
-
当执行大计算量的操作或设备性能不足时，页面掉帧导致卡顿。这就是CPU的瓶颈。
-
进行I/O操作后，需要等待数据返回才能继续操作。等待的过程导致不能快速响应。这就是I/O的瓶颈。
CPU瓶颈：在React中，最有可能造成CPU瓶颈的部分是“虚拟DOM相关工作”。解决的方法就是将虚拟DOM的执行过程拆分为一个个独立的宏任务，将每个宏任务的执行时间限制在一定范围内（初始化为5ms），来减少掉帧的可能性。这一技术叫做Time Slice（时间切片）。
具体包括一下三点：
-
为不同的操作赋予不同的优先级
-
优先处理“最高优先级的更新”
-
如果正在进行虚拟DOM相关的工作，有“更高优先级的更新”，则会中断当前更新，优先处理高优先级更新。
要实现以上三点需要React底层实现一下三点：
-
用于调度优先级的调度器
-
用于调度器的调度算法
-
支持可中断的虚拟DOM是新
React旧的架构，在Reconciler中，mount组件会调用mountComponent，update组件会调用updateComponent。这两个方法都会递归的更新子组件。更新流程一旦开始就无法中断。
React新的架构，增加了Scheduler（调度器），调度任务的优先级，高优先级任务优先进入Reconciler。Reconciler的更新流程从递归不可中断变成了“可终端的循环过程”。每次循环都会调用shouldYield判断当前Time Slice是否有剩余时间。没有时间就暂停更新流程，将主线程交给优先级更高的任务，这就是Time Slice（时间切片）的实现原理。
I/O瓶颈：更新流程变成“异步、可中断”并不能完全突破“I/O瓶颈”，解决问题的关键在于“使多个更新的工作流程并发执行”。所以React继续迭代为“并发模式”。
旧框架对应同步时期，新框架对应异步模式、并发模式、并发特征。
React从旧框架更新到新框架的过程-渐进升级
为了使React从旧版本平滑过渡到新版本，React团队采用了“渐进升级”方案。v16.3新增了StrictMode针对开发者编写的“不符合并发更新规范的代码”给提示出来。为了使不同模式的应用可能在同一个页面内工作，将大多数事件统一冒泡到HTML元素调正为冒泡到所在的根元素。