React解决什么问题

July 15, 2024 1 分钟阅读时间

React

设计理念 🔗︎

React 的目标是创建快速响应的 Web 架构。为了实现这一目标，React 需要解决两个核心问题：

1. 减少 IO 延迟 🔗︎

问题：无法完全避免 IO 延迟，但可以通过优化 UI 交互来提升用户体验。
解决方案：
- 在某些情况下，延迟显示加载状态（如 Loading）可以改善用户的感知体验。
- React 18 版本通过 Suspense 和 useDeferredValue 实现了更智能的加载和延迟策略。

2. 解决 CPU 瓶颈 🔗︎

问题：浏览器刷新频率为 60Hz（每 16.6ms 刷新一次），在这段时间内需要完成以下任务：
- 执行 JavaScript 脚本（JS 线程）
- 样式布局和绘制（GUI 渲染线程）
如果 JavaScript 脚本执行时间过长，会导致渲染任务无法按时完成，从而出现掉帧现象，表现为页面卡顿。
掉帧定义：
掉帧是指由于硬件性能不足或任务耗时过长，导致帧率低于 60fps，画面出现卡顿或停滞的现象。
React 18 的解决方案：
- 引入 时间切片（Time Slicing） 技术，将同步的更新任务拆分为可中断的异步更新任务。
- 使用 Fiber 架构，将任务分解为小单元，优先完成高优先级任务（如用户点击、动画等），确保渲染帧率稳定。

架构设计 🔗︎

React 的架构由三个主要部分组成：

调度器（Scheduler）
- 负责管理任务优先级，确保高优先级任务优先执行。
协调器（Reconciler）
- 负责找出变化的部分，并进行差异对比（Diffing）。
渲染器（Renderer）
- 负责将虚拟 DOM 转换为实际的 DOM 节点并渲染到页面上。

React 架构图

原理分析 🔗︎

渲染器的工作原理 🔗︎

渲染函数：将 JSX 转换为 DOM 节点，并通过原生 DOM API 进行渲染。
JSX 是什么？
- JSX 是一种描述组件内容的数据结构。
- 在 React 中，Babel 会将 JSX 编译为 DSL 对象，底层通过 React.createElement 方法调用，生成一个属性类型为 Element 的对象。
- React 组件是一个特殊的对象，可以通过 ClassComponent.prototype.isReactComponent 判断是否为类组件。

Fiber 架构 🔗︎

Fiber 节点：
- Fiber 节点是虚拟 DOM 节点，也是一个对象，定义在 packages/react-reconciler/src/ReactInternalTypes.js。
- Fiber 架构本质上是一棵树，每个节点作为一个单独的工作单元。
为什么需要 Fiber？
- 当 JSX 节点非常多时，直接渲染会导致长时间的任务阻塞（卡顿）。
- Fiber 架构通过将渲染任务拆分为多个小任务，利用时间切片技术，逐步完成渲染任务，确保主线程不被长时间占用。

框架设计与功能集 🔗︎

现代前端框架在功能设计上通常包含以下特性：

功能集 🔗︎

约定式路由
- 自动根据文件目录生成路由配置，减少手动配置的复杂性。
API 路由
- 提供后端 API 支持，方便前后端一体化开发。
SSR + SSG
- 支持服务端渲染（SSR）和静态生成（SSG），提升首屏加载速度和 SEO 效果。
编译时扩展
- 通过编译时的临时文件扩展框架能力，提供更高的灵活性。
插件和扩展机制
- 支持插件化开发，方便开发者按需引入功能模块。

数据加载机制对比 🔗︎

不同的框架在数据加载机制上有各自的实现方式，以下是几种主流框架的对比：

框架	数据加载方法	特点
Remix	`export loader`	通过 `loader` 方法加载数据，支持路由级别的声明式数据获取。
Umi	`export clientLoader`	提供客户端数据加载方法，结合路由和编译态优化请求速度。
Qwik	`export onGet`	使用 `onGet` 方法加载数据，强调无绑定的懒加载能力。
Fresh	`export handler`	导出包含 `Get` 方法的处理器对象，基于 Deno 和真 Bundless 架构。
Solid Start	`export routeData`	提供 `routeData` 方法，支持声明式数据获取和缓存优化。

数据加载的核心思想 🔗︎

运行时库 vs 框架结合
- 社区方案（如 useEffect、SWR、React Query）虽然能解决部分问题，但如果追求极致的请求速度，仅依赖运行时库是不够的。
- 需要将数据加载与框架深度结合（路由和编译态结合），以实现更快的请求发起、并行执行以及缓存优化。

总结 🔗︎

React 的设计理念围绕着如何提升 Web 应用的响应速度展开，通过引入 Fiber 架构 和 时间切片 技术，解决了传统渲染中的性能瓶颈问题。同时，现代前端框架在功能设计上不断演进，提供了丰富的工具和机制（如约定式路由、SSR/SSG、插件扩展等），帮助开发者构建高性能的应用程序。

通过深入理解 React 的架构和原理，以及不同框架的数据加载机制，我们可以更好地选择和设计适合项目需求的技术方案。