概述

相关源文件

• .mailmap
• CHANGELOG.md
• CODE_OF_CONDUCT.md
• README.md
• package.json
• packages/eslint-plugin-react-hooks/package.json
• packages/jest-react/package.json
• packages/react-art/package.json
• packages/react-dom/package.json
• packages/react-is/package.json
• packages/react-native-renderer/package.json
• packages/react-noop-renderer/package.json
• packages/react-reconciler/package.json
• packages/react-test-renderer/package.json
• packages/react/package.json
• packages/scheduler/package.json
• packages/shared/CheckStringCoercion.js
• packages/shared/ReactVersion.js
• scripts/flow/config/flowconfig
• scripts/flow/createFlowConfigs.js
• scripts/rollup/build.js
• scripts/rollup/bundles.js
• scripts/rollup/forks.js
• scripts/rollup/modules.js
• scripts/rollup/packaging.js
• scripts/rollup/sync.js
• scripts/rollup/validate/index.js
• scripts/rollup/wrappers.js
• scripts/shared/inlinedHostConfigs.js
• yarn.lock

本文档提供了对React代码库的全面介绍，解释了其架构、关键组件以及它们如何协同工作以创建React库生态系统。React是一个用于通过基于组件的声明式方法构建用户界面的JavaScript库。

React简介

React是由Meta（前Facebook）和开发者社区开发和维护的JavaScript库。其主要目的是通过基于组件的架构来促进用户界面的构建。React采用虚拟DOM来实现高效的渲染和更新，使开发人员能够创建可预测地更新的交互式UI。

React的关键原则包括：

• 声明式：开发人员根据当前状态描述UI应该是什么样子
• 基于组件：UI被分解为封装的、可重用的组件
• 一次学习，随处编写：React可用于构建Web应用程序（React DOM）、移动应用程序（React Native）和其他平台

来源：README.md3-7 packages/react/package.json2-4

存储库结构

React仓库被组织成一个monorepo，其中包含多个包，每个包在React生态系统中都有特定的职责。主要包包括：

包	描述	版本
react	核心React库	19.1.0
react-dom	用于处理DOM的React包	19.1.0
react-test-renderer	用于快照测试的React包	19.1.0
react-reconciler	用于创建自定义渲染器的包	0.32.0
scheduler	浏览器环境的协作式调度器	0.26.0
react-is	React元素的品牌检查	19.1.0
eslint-plugin-react-hooks	React Hooks的ESLint规则	5.2.0

构建系统使用Rollup来创建针对不同环境的各种捆绑包，包括：

• 开发和生产构建
• CommonJS (Node.js), ESM (ES Modules), and browser bundles
• 特定平台的构建（Web, React Native）

来源：package.json1-7 scripts/rollup/bundles.js10-31 packages/shared/ReactVersion.js15

核心架构

React组件模型

React的组件架构允许开发人员构建封装的、可重用的UI元素。组件可以是基于类的，也可以是基于函数的（带Hooks）。

该图显示了JSX如何被转换为React元素，然后通过协调算法进行处理并渲染到目标平台。

来源：scripts/rollup/bundles.js56-67

高层系统架构

该图显示了核心React包、渲染目标（如ReactDOM和ReactNative）以及附加工具之间的关系。核心协调器通过一个定义明确的接口与不同的渲染器进行协调。

来源：scripts/rollup/bundles.js69-128 packages/react-dom/package.json1-4 packages/react-reconciler/package.json1-5

Fiber协调架构

React的协调引擎，称为Fiber，提供了一种方法来：

• 将渲染工作分解为小单元
• 暂停和恢复工作
• 为不同类型的更新分配优先级
• 尽可能重用先前的工作
• 在不再需要时中止工作

Fiber架构允许React实现并发渲染等高级功能，这使得React能够同时处理UI的多个版本。

来源：scripts/rollup/forks.js242-269 packages/react-reconciler/package.json1-5

构建和打包系统

React采用复杂的构建系统，为不同环境创建优化的捆绑包

构建系统支持各种模块格式和环境，使React能够跨不同平台运行，并为每个目标提供优化代码。

来源：scripts/rollup/build.js1-60 scripts/rollup/bundles.js10-54 scripts/rollup/packaging.js41-114

功能标志和环境Forking

React使用功能标志来根据构建环境启用或禁用功能。这使得实验和逐步发布功能成为可能。

Forking系统允许React在平台之间共享大部分代码，同时为不同环境定制特定模块。

来源：scripts/rollup/forks.js134-191 scripts/shared/inlinedHostConfigs.js1-30

发布渠道

React支持多种发布渠道，以提供稳定性并促进实验

渠道	目的
稳定	符合语义化版本控制的生产就绪发布
实验版	包含尚未准备好广泛发布的特性
发布候选版本	用于稳定发布前测试的预发布版本

发布渠道允许开发人员在稳定性与访问新功能之间进行选择。

来源：CHANGELOG.md48-52 scripts/rollup/bundles.js5-8

服务器端渲染和服务器组件

React通过多种技术支持在服务器上渲染组件

• 传统SSR：最初的同步服务器渲染
• Fizz：一种流式服务器渲染器，可以增量发送HTML
• 服务器组件：允许组件完全在服务器上运行，而无需任何客户端JavaScript

来源：scripts/rollup/bundles.js314-366 packages/react-dom/package.json51-69

结论

React是一个复杂的库，具有模块化架构，能够支持多个平台和渲染策略。代码库围绕一个核心协调引擎进行组织，该引擎可以通过可插拔的主机配置系统适应不同的渲染目标。构建系统为各种环境创建优化捆绑包，功能标志允许环境特定的代码路径。

有关特定子系统的更详细信息

• 有关协调器的详细信息，请参阅React Reconciler
• 有关React Hooks的信息，请参阅React Hooks
• 有关渲染目标的信息，请参阅渲染目标
• 有关服务器端渲染的详细信息，请参阅服务器端渲染