跳到主要内容

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

信息

本文档内容基于 git 提交 "c80a07509582daadf275f36ffe7a88c3b12e9db4" （ 2026 年 3 月 13 日 05:36 ）

React 版本为 19.3.0 ，更新内容可见 《更新日记》

危险

请不要试图将某个本网站的内页地址作为收藏或外链，因为链接可能会随着 react 源码的更新而变化

React 源代码版权归 face book 公司所有，这里仅做学习分析。

提示

如果仅想了解 react 的工作原理，deep wiki react 更适合你

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​

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

最后于 更新