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递归、同步的更新执行是不支持的,重构就必须来了

相关推荐
子兮曰2 小时前
后端字段又改了?我撸了一个 BFF 数据适配器,从此再也不怕接口“屎山”!
前端·javascript·架构
程序员ys4 小时前
前端权限控制设计
前端·vue.js·react.js
卓卓不是桌桌4 小时前
如何优雅地处理 iframe 跨域通信?这是我的开源方案
javascript·架构
Qlly4 小时前
DDD 架构为什么适合 MCP Server 开发?
人工智能·后端·架构
不会敲代码14 小时前
从零开始用 TypeScript + React 打造类型安全的 Todo 应用
前端·react.js·typescript
小时前端20 小时前
React性能优化的完整方法论,附赠大厂面试通关技巧
前端·react.js
阿慧勇闯大前端1 天前
在AI时代,再去了解react19新特性还有用吗? 最近总有朋友问我:“现在AI写代码这么厉害了,我写个需求丢给ChatGPT,几秒钟就生成一堆组件,还学新特
前端·react.js
用户881586910911 天前
AI Agent 协作系统架构设计与实践
架构
鹏北海1 天前
Qiankun 微前端实战踩坑历程
前端·架构
货拉拉技术1 天前
货拉拉海豚平台-大模型推理加速工程化实践
人工智能·后端·架构