React 核心概念

相关源文件

• .mailmap
• CHANGELOG.md
• CODE_OF_CONDUCT.md
• README.md
• packages/shared/ReactTypes.js

本文档概述了驱动 React 设计和架构的基本概念。它涵盖了使 React 成为构建用户界面的强大库的核心原则，包括组件模型、虚拟 DOM、声明式编程范式和协调过程。有关 React 仓库文件结构的信息，请参阅仓库结构。

1. 什么是 React？

React 是一个用于构建用户界面的 JavaScript 库。其核心在于，React 提供了一个基于组件的架构和高效的渲染系统。该库的设计原则侧重于三个主要方面：

• 声明式 UI：React 通过使用声明式范式，轻松创建交互式用户界面。您描述 UI 在任何给定状态下应该是什么样子，当数据发生变化时，React 会高效地更新和渲染正确的组件。

• 基于组件的架构：React 鼓励构建封装的、可重用的组件，这些组件管理自己的状态。组件可以组合起来构建复杂的用户界面。

• 一次学习，随处编写：React 的设计使其可以在不同平台渲染，包括浏览器（通过 ReactDOM）、移动设备（通过 React Native）和服务器（通过服务器端渲染）。

来源：README.md3-7

2. 组件模型

React 的核心是其组件模型。组件是任何 React 应用程序的构建块，封装了 UI 和逻辑。

2.1 组件类型

React 支持两种主要的组件类型：

• 函数组件：接受 props 作为参数并返回 React 元素的简单 JavaScript 函数。
• 类组件：继承自 React.Component 并实现 render 方法的 ES6 类。

虽然两种组件类型都受支持，但带 Hook 的函数组件现在是新代码的推荐方法。

2.2 组件数据流

React 遵循单向数据流模型：

组件数据流图

• Props：从父组件传递给子组件的只读数据
• State：在组件内部管理的可变数据
• Context：无需显式传递 props 即可访问组件树的数据

来源：README.md5-6 packages/shared/ReactTypes.js10-16

3. 虚拟 DOM 和协调

React 的核心创新之一是其虚拟 DOM 和高效协调算法的实现。

3.1 虚拟 DOM

虚拟 DOM 是实际 DOM 的轻量级内存表示。React 操作首先在这个虚拟表示上执行，而不是直接更新浏览器 DOM。

虚拟 DOM 和协调过程

来源：README.md5

3.2 协调过程

协调过程是 React 响应状态或 props 变化来更新 DOM 的方式：

1. 当组件的状态或 props 发生变化时，React 会创建一个新的虚拟 DOM 树。
2. React 将新的虚拟 DOM 与旧的虚拟 DOM 进行比较（diffing）。
3. React 计算更新实际 DOM 所需的最小操作集。
4. React 只将这些最小的更改应用到真实的 DOM。

这种方法通过最大限度地减少昂贵的 DOM 操作，提供了显著的性能优化。

协调过程时序图

来源：README.md5

4. React 元素树

4.1 JSX 和 React 元素

JSX 是一种 JavaScript 语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。它在构建时被转换为 React.createElement() 调用。

4.2 元素结构

React 元素是表示虚拟 DOM 中组件的普通 JavaScript 对象：

属性	描述
类型	String（用于 DOM 元素）或 function/class（用于组件）
key	可选的唯一标识符，帮助 React 在协调过程中识别元素
ref	可选引用，用于访问实际的 DOM 节点或组件实例
props	包含此元素的属性和子级的对象
$$typeof	用于安全目的的 Symbol

来源：packages/shared/ReactTypes.js10-16 README.md45-58

5. React 类型系统

React 定义了一个全面的类型系统来表示其内部数据结构和 API。

React 类型系统层级

主要类型包括：

• ReactNode：最通用的类型，表示任何可渲染的内容
• ReactElement：由 React.createElement() 返回的对象
• ReactText：字符串或数字字面量
• ReactFragment：多个元素组合在一起
• ReactPortal：渲染到不同 DOM 子树的元素
• ReactContext：用于在组件树中传递数据的上下文对象

来源：packages/shared/ReactTypes.js10-16 packages/shared/ReactTypes.js52-65 packages/shared/ReactTypes.js67-74

6. React Hooks

Hooks 是允许您从函数组件“挂入” React 状态和生命周期特性的函数。它们在 React 16.8 中引入，并已成为编写 React 组件的首选方式。

6.1 核心 Hooks

钩子	目的
useState	为函数组件添加状态
useEffect	执行副作用（类似于生命周期方法）
useContext	访问上下文值
useReducer	管理复杂的状态逻辑
useCallback	记忆回调函数
useMemo	记忆计算值
useRef	创建可变引用

6.2 Hook 规则

• 只在顶层调用 Hook（不要在循环、条件或嵌套函数中调用）
• 只在 React 函数组件或自定义 Hook 中调用 Hook

来源：CHANGELOG.md57-64

7. 渲染架构

React 的渲染架构由几个关键组件组成，它们协同工作以高效更新 UI。

React 渲染架构

7.1 Fiber 架构

Fiber 架构是 React 的协调引擎。主要方面包括：

• Fiber 节点：组件的内存表示
• 工作循环：协调渲染过程
• 优先级调度：允许 React 优先处理紧急更新
• 增量渲染：支持将渲染工作分解成块

7.2 渲染过程

渲染过程遵循以下步骤：

1. 渲染阶段：React 调用组件并创建一个新的 Fiber 树（工作中的树）
2. 提交阶段：React 将更改应用到 DOM
3. 被动副作用阶段：React 运行像 useEffect 回调这样的副作用

来源：CHANGELOG.md160-171

8. 并发特性

React 包含并发渲染特性，这允许 React 同时处理 UI 的多个版本：

• Suspense：一个允许您“等待”某些代码或数据加载的组件，并声明式地指定加载状态
• Transitions：将更新标记为非紧急的 API，允许 React 优先处理更重要的更新
• Deferred Values：允许您在更新新值的同时显示旧值

并发渲染优先级

来源：CHANGELOG.md58-60 CHANGELOG.md163-164

9. 跨平台渲染

React 的架构允许通过不同的渲染器在多个平台进行渲染：

渲染器	目标平台	包
ReactDOM	网页浏览器	react-dom
React Native	移动设备	react-native
React 服务器	服务器端渲染	react-dom/server
React Flight	服务器组件	react-server-dom-*

所有渲染器共享相同的核心 React 协调引擎，但实现平台特定的渲染逻辑。

来源：README.md7

总结

React 的核心概念建立在其组件模型、虚拟 DOM 和协调算法之上，提供了高效且对开发者友好的用户界面构建方式。单向数据流、声明式方法和组件可重用性使复杂的 UI 开发更易于维护。React 的架构使其能够支持多个渲染目标，同时在不同平台共享相同的核心原则。