React 核心架构概述 ​

系列导读与写作约定：index、写作约定。下文为概念总览，实现见各专题章（少贴源码）。

1. React 是什么 ​

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook（现 Meta）开发。它的核心思想是：

• 声明式编程：描述 UI 应该是什么样子，而不是如何操作 DOM
• 组件化：将 UI 拆分成独立、可复用的组件
• 一次学习，到处编写：可以用于 Web、移动端（React Native）、服务器端（SSR）

2. React 核心概念 ​

2.1 Virtual DOM ​

Virtual DOM 是 React 的核心抽象，它是一个轻量级的 JavaScript 对象，表示真实 DOM 的结构。

为什么需要 Virtual DOM？

1. 性能优化：避免直接操作 DOM，减少重排和重绘
2. 跨平台：同一套 Virtual DOM 可以渲染到不同平台（DOM、Native、Canvas）
3. 批处理更新：可以将多个更新合并，减少渲染次数

2.2 组件（Component） ​

组件是 React 应用的基本构建块，有两种类型：

• 函数组件：使用函数定义的组件
• 类组件：使用 ES6 class 定义的组件（React 19 中已不推荐）

2.3 Props 和 State ​

• Props：从父组件传递下来的数据，不可变
• State：组件内部的状态，可变

3. React 渲染流程 ​

React 的渲染分为三个阶段：

3.1 Render 阶段（可中断） ​

1. 开始工作（beginWork）：创建或更新 Fiber 节点
2. 完成工作（completeWork）：完成当前节点的处理，准备提交

3.2 Commit 阶段（不可中断） ​

1. Before Mutation：DOM 变更前的准备工作
2. Mutation：执行 DOM 操作
3. Layout：DOM 变更后的同步操作（useLayoutEffect）

3.3 副作用处理 ​

• Passive Effects：异步执行（useEffect）

4. React 版本演进 ​

React 16（Fiber） ​

• 引入 Fiber 架构
• 支持异步渲染
• 错误边界（Error Boundaries）

React 17 ​

• 新的 JSX Transform
• 事件委托改进

React 18 ​

• Concurrent Rendering（并发渲染）、createRoot
• Automatic Batching（自动批处理）
• Suspense / 流式 SSR 增强
• useId、useSyncExternalStore、useInsertionEffect、useTransition、useDeferredValue

React 19 ​

• Actions、useActionState、useOptimistic
• use（Promise / Context）
• ref 作为 prop、RSC 与 Server Actions 稳定
• 文档元数据等

Hook 分版本见 04-Hooks §2。

5. 专题索引 ​