React自称为UI库，也可以叫UI运行时，从 v16 到 v18，为了更快的响应，React 一直在死磕运行时，React 运行时代码也越来越复杂，从 fiber 到 lanes 等等；而且 React 为了开发者能够平滑升级，采用了渐进升级的方案，一直到 v18 才正式发布 concurrent 特性。
Fiber
V16发布了 Fiber 架构，主要是为了将来的异步渲染（async rendering）铺路，避免阻塞主线程，也就是现在的并发（concurrent rendering）。
先介绍一下Fiber架构：
React15的时候架构分为：
- Reconciler（协调器）------ render阶段，通过虚拟dom找出变化的节点
- Renderer（渲染器）------ commit阶段，将变化更新到页面
这里的reconciler是 stack reconciler，这时候更新为递归更新，一旦开始不可中断，阻塞线程，造成卡顿。
React 16的Fiber架构：
- Scheduler（调度器）------ 根据优先级调度任务
- Reconciler（协调器）------ 找出变化的节点
- Renderer（渲染器）------ 将变化更新到页面
这里的 reconciler 是 fiber reconciler，通过 fiber 将树结构转成类似链表的结构实现了协调过程的可中断/恢复，reconciliation 完毕后一次性提交给 renderer，进行 commit，commit 阶段是不可中断的。
reconciliation 过程中使用了双缓冲技术，由于协调过程是可中断，当前页面是保持不变的，调和过程基于 current tree 的构建新的 workInProgress tree，构建完成后一次性替换和提交。可以想象成 fork 了一个分支，进行修改，再合并到旧分支。
通过时间分片渲染，循环判断是否有高优先级的任务，中断渲染，交出线程的控制权。
注意在非并发模式下，协调过程是同步的，并不会中断。
js
function workLoopSync() {
// Perform work without checking if we need to yield between fiber.
while (workInProgress !== null) {
performUnitOfWork(workInProgress);
}
}Concurrent
在 V16 的roadmap关于并发渲染的规划，从最初的async mode更名为 concurrent mode。
V17 作为渐进升级的过渡版本，分了3种模式
- Legacy Mode:
ReactDOM.render(<App />, rootNode) - Blocking Mode:
ReactDOM.createBlockingRoot(rootNode).render(<App />) - Concurrent Mode:
ReactDOM.createRoot(rootNode).render(<App />)
v18不需要再明确设置模式，而是以使用并发特性作为启用并发渲染的依据，如使用useTransition和useDeferredValue，减少开发者的升级成本。
优先级调度
React17使用Lanes 优先级模型替代expirationTime
只按expirationTime比较会有一些问题，耦合了任务的优先级和批量更新，比如高优先级 IO 任务阻塞低优先级 CPU 任务；而且无法表现多个优先级。
React版本历史
重要更新：
-
V16(2017)：Fiber
-
V16.8(2019)：Hooks
-
V17(2020)：过渡版本
-
V18(2021)：concurrent mode
为什么Vue不使用时间切片
总结就是：Vue由于响应式和编译优化，性能已经足够好，引入 Fiber 会增加复杂度，收益没有那么明显。