React 运行时进化--从 Fiber 到 Concurrent

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不需要再明确设置模式,而是以使用并发特性作为启用并发渲染的依据,如使用useTransitionuseDeferredValue,减少开发者的升级成本。

What happened to concurrent "mode"?

优先级调度

React17使用Lanes 优先级模型替代expirationTime

github.com/facebook/re...

只按expirationTime比较会有一些问题,耦合了任务的优先级和批量更新,比如高优先级 IO 任务阻塞低优先级 CPU 任务;而且无法表现多个优先级。

React版本历史

github.com/facebook/re...

重要更新:

为什么Vue不使用时间切片

Why remove time slicing from vue3?

总结就是:Vue由于响应式和编译优化,性能已经足够好,引入 Fiber 会增加复杂度,收益没有那么明显。

参考

相关推荐
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js