跳到主要内容

React 源码的核心架构围绕着 Fiber 协调器 、 Scheduler 调度器 、 Renderer 渲染器 展开，其中 Fiber 是 React 16+ 的核心，支持了并发渲染的新特性。

信息

本文档内容基于 git 提交 "5a9921b839ad8e3cf0069f23c75045fa94373643" （ Sat Nov 8 18:09:44 2025 +0100 ）

React 版本为 19.3.0

React 源码的目录结构设计与其 Monorepo 管理 、 编译优化 及 核心功能实现 密切相关。

一、 packages​

React 源码采用 多包管理（ monorepo ） ，核心代码在 [packages] 目录下，各包职责清晰，避免一开始就陷入“全局找代码”的困境。

信息

当前本文档目前仅关注 [packages] 下的文件内容

1. 调度层（ Scheduler ）​

调度层负责组件更新的优先级、时间切片（ Time Slicing ）、并发执行 （ Concurrent Mode ） ，确保高优先级任务（如用户输入）能打断低优先级任务（如列表渲染），提升交互流畅性。

2. 协调层（ Reconciler ）​

通过 Fiber 架构遍历组件树，对比新旧虚拟 DOM （ Diff 算法 ），标记需要更新的组件，生成更新任务列队供调度层执行。

功能说明：

  • 在 React 16+ 中， 协调器和渲染器不再交替进行，协调器负责找出差异后统一交给渲染器
  • 实现了 Fiver 架构，是更新过程可以中断和恢复
  • 负责对比新旧 Fiber 节点（ Diff ）算法，标记需要更新的节点
  • 接收调度层的任务调度，在空闲时执行“协调工作”（如处理 setState 、 useState 触发的更新 ）
  • 完成协调后，将更新结果（需要执行的 DOM 操作、副作用等）提交给渲染层执行
  • 通过 workLoopConcurrent 函数实现可中断的循环处理

3. 渲染层（ Renderer ）​

根据协调层生成的更新任务，将组件变更渲染到具体的平台（如浏览器起 DOM 、 [React Native] 原生组件、测试快照）。

功能说明：

  • react-dom 是最常用的渲染器，负责将 React 组件渲染到 DOM 中
  • react-noop-renderer 用于调试 Fiber 架构
  • 渲染层的工作被定义为“不可被打断”， 确保 DOM 更新的完成性

对应：

4. 设计说明​

二、flow-typed​

Flow 类型定义仓库 ， 用于第三方库或 React 内部未直接维护的模块提供类型声明。

React 早期主要通过使用 Flow 做类型检查（现逐步转向 TypeScript ，但核心代码仍保留 Flow ）。

flow-typed 目录储存社区或 React 团队为其他库编写的 Flow 类型定义（ .flowtype 文件，但是并没有在最新的版本中找到这些文件 ），确保 React 与这些库的兼容。

三、 fixtures​

测试用例的“场景沙盒 ， 用于验证 React 在不同的极端或典型环境下的行为。

包含大量小型示例项目或组件，覆盖边界条件（如错误边界、异步渲染、跨版本兼容）、性能敏感场景（如大规模列表、高频状态更新）等。

开发者可通过这些固定场景的测试，快速验证代码修改。

四、compiler​

试验性变异工具链，主要用于 JSX 运行时优化 和 竞态分析。

React 团队为了减少运行时开销，推出 React Compiler （使用时安装为 babel-plugin-react-compiler ），通过静态分析组件的渲染逻辑，自动优化 setState 批处理、移除冗余状态更新等。

该目录包含编译器的核心实现，例如将 JSX 转换为更高效的函数调用、识别可静态化的组件逻辑，最终输出优化后的组件代码。

该目录下除了 babel-plugin-react-compiler 外还有对 其他环境的支持。

五、scripts​

开发与发布工具链 ， 包含构建、测试、打包、文档生成等自动化脚本。