react 为什么要重构架构

前言

重构架构是react16及16后的版本对15以前的版本的架构进行了重构,

React 15 的架构可以分为两层:

  • Reconciler(协调器) 负责找出变化的组件,以及标识出如何更新。
  • Renderer(渲染器) 负责将变化的组件渲染到页面上。

React 15 使用的是栈调和器,它是递归、同步的方式。这样的设计可以使组件更新简单、快速,有一些缺点,例如:

  • 更新一旦开始,中途就无法中断,可能会造成浏览器渲染卡顿。
  • 无法实现异步、分片、优先级等高级功能。
  • 无法兼容新的浏览器特性,如 requestIdleCallback 和 requestAnimationFrame。

React 16 的架构可以分为三层:

  • Scheduler(调度器),负责调度任务的优先级,高优任务优先进入
  • Reconciler(协调器)。Reconciler 负责找出变化的组件,以及标识出如何更新。
  • Renderer(渲染器), 负责将变化的组件渲染到页面上。¹²

React 16 使用的是全新的 Fiber 调和器,它是循环、异步、可中断的方式。这样的设计可以使组件更新更加灵活、高效带来了一些优点:

  • 可以在浏览器每一帧的时间中,预留一些时间给 JS 线程,避免长时间占用主线程,造成卡顿。
  • 可以实现异步、分片、优先级等高级功能,如 Concurrent Mode(并发模式)、Suspense(悬停)、Lazy Loading(懒加载)等。
  • 可以兼容新的浏览器特性,如 requestIdleCallback 和 requestAnimationFrame。

总结

重构 React 的架构的主要原因是为了提高 UI 的渲染性能和用户体验,解决 CPU 和 I/O 的瓶颈,实现异步、可中断、可恢复、可优先级的更新流程,以及支持一些新的特性,如 Time Slice(时间分片)、Suspense(悬停)、Lazy Loading(懒加载)、Concurrent Mode(并发模式),所以react15递归、同步的更新执行是不支持的,重构就必须来了

相关推荐
阳光是sunny5 小时前
Vue 项目怎么做用户行为全链路监控?轻量插件方案详解
前端·面试·架构
EMA11 小时前
Docker虚拟化失败解决方案
架构
李斯维11 小时前
从历史的角度看 Android 软件架构
android·架构·android jetpack
YFF菲菲兔11 小时前
useState 源码解析
react.js
JouYY13 小时前
聊一下多 Agent 编排架构的应用实践
架构·llm·agent
Sunia14 小时前
《AgentX 专栏》10-生产部署:3台2C4G云服务器把企业级Agent真正跑起来的完整方案
java·架构
Flynt18 小时前
我的Next.js项目升级到16之后,dev倒是快了,但build差点让我回退
react.js·next.js·turbopack
ZhengEnCi2 天前
Q01-高并发点赞系统架构设计
架构
笨鸟飞不快2 天前
从 MVC 到 DDD:一次真实的渐进式迁移实录
后端·架构
光影少年2 天前
HashRouter 和 BrowserRouter 区别、底层原理、部署差异
前端·react.js·nestjs