4-2-1 React源码核心目录及文件
核心目录总览
React 源码的 packages/ 目录下有大量子包，但真正需要深入学习的只有几个核心目录：
packages/
├── shared/ # 公共工具方法
├── react/ # React 核心 API（★ 必看）
├── react-dom/ # DOM 渲染器（★ 必看）
│ └── src/
│ ├── client/ # 客户端渲染相关
│ └── events/ # 事件系统
├── react-reconciler/ # 协调器 / Fiber 核心（★ 最重要）
├── scheduler/ # 任务调度器（★ 必看）
├── react-compiler/ # React Compiler（React 19 新增，Rust 编写）
├── react-cache/ # 缓存模块
├── react-art/ # Canvas 渲染器
├── react-server/ # 服务端渲染相关
├── react-refresh/ # Hot Reload 相关
└── ...（调试工具等，不需要深入）
text
各目录详细说明
shared/ — 公共工具
存放多个 packages 共用的工具方法：
| 内容 | 说明 |
|---|---|
| 版本号管理 | 统一管理 React 各包的版本 |
| 类型定义 | 公共的 TypeScript 类型 |
| 工具函数 | 对象合并、属性检查等通用方法 |
| 常量定义 | 共用的枚举值和常量 |
react/ — React 核心
这是开发者最熟悉的 import React from 'react' 对应的源码：
react/src/
├── React.js # React 对象的主入口
├── ReactBaseClasses.js # Component 和 PureComponent 基类
├── ReactChildren.js # Children API
├── ReactElement.js # createElement 方法
├── ReactHooks.js # Hooks API（useState、useEffect 等）
├── ReactContext.js # Context API
├── ReactMemo.js # React.memo
├── forwardRef.js # forwardRef
└── ...
text
重点关注：
ReactElement.js——理解 Element 对象的创建过程ReactHooks.js——Hooks 的入口，具体实现在 reconciler 中ReactBaseClasses.js——类组件的基类定义
react-dom/ — DOM 渲染器
负责将 React 组件渲染到浏览器 DOM：
react-dom/src/
├── client/ # 客户端 API
│ ├── ReactDOM.js # render、createRoot 等 API
│ └── ...
├── events/ # 合成事件系统
│ ├── EventListener.js # 事件监听
│ ├── SyntheticEvent.js # 合成事件对象
│ └── ...各类事件插件
└── shared/ # DOM 操作工具
text
react-reconciler/ — 协调器（Fiber 核心）
这是 React 源码中最核心、最复杂的部分，也是理解 Fiber 架构的关键：
react-reconciler/src/
├── ReactFiber.js # Fiber 对象定义
├── ReactFiberBeginWork.js # beginWork（渲染阶段入口）
├── ReactFiberCompleteWork.js # completeWork（渲染阶段出口）
├── ReactFiberCommitWork.js # commitWork（提交阶段）
├── ReactFiberWorkLoop.js # 工作循环（调度核心）
├── ReactFiberReconciler.js # 协调器入口
├── ReactFiberTreeReflection.js # Fiber 树遍历工具
├── ReactChildFiber.js # 子节点 Diff 逻辑
├── ReactUpdateQueue.js # 更新队列管理
└── ...
text
源码阅读顺序建议：
ReactFiber.js（了解数据结构）
→ ReactFiberWorkLoop.js（了解工作循环）
→ ReactFiberBeginWork.js（入口逻辑）
→ ReactChildFiber.js（Diff 逻辑）
→ ReactFiberCompleteWork.js（出口逻辑）
→ ReactFiberCommitWork.js（提交 DOM）
text
scheduler/ — 任务调度器
管理 Fiber 任务的优先级和调度执行：
scheduler/src/
├── Scheduler.js # 核心调度逻辑
├── SchedulerMinHeap.js # 优先级队列（最小堆）
└── ...
text
源码阅读策略
- 不要试图一次性通读所有文件——先从核心概念入手，按需深入
- 结合调试工具——在断点中跟踪代码执行路径，比静态阅读高效得多
- 关注数据流——从
setState开始，跟踪数据如何流向 Fiber → Diff → DOM - 善用搜索——通过函数名和变量名在项目中全局搜索，建立函数调用关系的认知
- 对照文档——React 官方文档中的概念可以在源码中找到对应实现
↑