Table of contents
Open Table of contents
React 诞生的根本原因
广告团队自研的 BoltJS 框架有 10% 的场景无法优雅处理，导致无法持续用声明式方案，这在庞大团队中最终影响代码一致性、开发者体验和培训成本。为了解决这些问题，Jordan Walke 着手研发了 FaxJS/Fbolt（后来的 React），致力于用新的思路统一 UI 逻辑和开发范式。
React 的底层设计逻辑是什么
- 以“状态驱动 UI”为核心——视图始终是（不可变）状态的纯函数。
- 使用虚拟 DOM做抽象，每次状态变化都计算出新的 UI 树，再与上一次的虚拟树比较，仅将必要的变动同步到真实 DOM，保证性能和一致性。
- 明确副作用（如事件监听、数据请求）只能在专用 Hook（如 useEffect）中进行，渲染过程保证幂等（idempotent），从而保证稳定和便于自动优化。
- 强调逻辑高度组合与复用，通过函数、Hook、边界等机制可随意组合和拆分能力。
- 所有 API 的行为和边界都自洽，为未来自动优化和新架构（如并发、RSC）铺好基础。
React 的演变路径是什么
- 2011-2013：React 诞生于 Facebook 内部，为统一 UI 状态和一致性而生。2013 年正式开源。
- 类组件阶段：初期用 class-based 组件实现 render+生命周期+状态管理，但逻辑复用受限、继承复杂。
- 高阶组件/Render Props：社区用 HOC/render props 弥补逻辑复用短板，但可读性和类型支持欠佳。
- 函数组件：2015 年引入 function component，极简但无状态管理能力；仍有限制。
- Hooks 变革：2019 年，Hooks 彻底解锁函数组件全部能力，彻底统一了组件编写和逻辑复用范式。
- Fiber 架构（React 16）：重写内核，解锁中断/优先级/可恢复渲染，支撑并发等未来能力。
- Suspense/ErrorBoundary：让错误/loading/异步加边界管理能力，并支持代码打包切分、懒加载。
- 并发 API & use 数据请求（React 18/19）：原生支持并发、原生数据请求/加载统一，真正实现“异步 UI”。
- RSC（Server Components）+ Server Actions：支持组件级别的服务端和客户端分离、无缝数据获取与回传。
- 未来方向：Activity、React 编译器等进一步提升性能、自动优化和开发体验。
JSX 的优点
- 模板可在运行前编译，开发阶段就能捕获和调试错误。
- JSX 不是字符串模板，天然防止 XSS 注入风险。
- 可直接利用 JS 的表达式和逻辑，不需要为模板语言另造控制语法，降低心智负担。
- 调试时出错位置直观且易定位。
React 状态变化至渲染的程序路径
React 处理状态变化
→ 触发 VDOM diff
→ 预更新 VDOM
→ 最终提交真实 DOM
Hooks 出现解决了哪些问题
- 解决了类组件“逻辑复用难”和生命周期陷阱问题。Hooks 让副作用、状态等逻辑轻松抽离并可多次复用，无需继承/HoC。
- 解决了函数组件没有状态、无法响应用户交互和生命周期问题。
- 支持随意组合和拆分逻辑，形成现代 React 的开发范式。
React 的核心设计原则
幂等性（Idempotence）
- 每次渲染/副作用都必须避免副作用泄漏或重复，确保正确挂载/卸载，UI 状态始终一致，预防内存泄漏和未知异常。
- 组件生命周期和副作用必须始终可预测，支持自动清理和自动重试。
Fiber 架构给 React 带来了哪些能力
- 渲染任务可中断（pause）和恢复（resume），保证高优先级 UI 不被大任务阻塞。
- 支持分配任务优先级，重要更新更快响应。
- 复用已完成的子树和任务，提升性能。
- 可随时中止不再需要的任务，避免无用渲染。
Suspense + use 组合的优缺点
优点：
- 优雅、统一地处理 UI 加载状态，无需每层组件手动传递 loading 标志。
use强制把数据请求逻辑提升到高层，自动实现并行加载、避免瀑布式请求。- 多个异步请求/加载状态可以由 Suspense 统一收敛与管理，代码结构更清晰。
缺点：
- 某些第三方组件或老旧代码库需要显式自定义 loading 状态时集成成本较高。
- 生态迁移成本：部分场景下 Async Loading 与 Suspense(use) 的边界处理相对复杂，需要开发者适应新范式。
RSC 的原理是什么
- 开发者可用
use client标记需要在客户端执行的组件，未标记的默认是服务端组件。 - 所有组件初始都在服务端渲染。
- 客户端侧只会复用/重渲染被标记为 client 的组件，服务端已生成部分直接复用。
- 服务端会将虚拟 DOM 树状态序列化传送到浏览器，避免客户端重复计算和“重演”过程。
- 客户端据 VDOM 状态，合理跳过重复渲染，实现服务端和客户端的高效协作。