读源码时对照这张表,快速定位"这个功能在哪个包"。
核心包
| 包 | 干什么 | 主要章节 |
|---|
react | 对外 API、Hooks 的入口 | 第 2、12~16 章 |
react-reconciler | 核心中的核心:Fiber、工作循环、diff、调度 | 全书主线 |
react-dom | 浏览器渲染器入口、createRoot | 第 1 章 |
react-dom-bindings | DOM 操作、合成事件、host config | 第 18、19、34 章 |
scheduler | 任务调度、时间切片 | 第 5 章 |
shared | 跨包共享的工具和常量(ReactSymbols 等) | 各章 |
RSC 相关
| 包 | 干什么 | 主要章节 |
|---|
react-server | 服务端渲染(Fizz/SSR + Flight) | 第 30 章 |
react-client | 客户端消费 flight payload | 第 30 章 |
react-server-dom-webpack | RSC 与打包器的桥(webpack 集成) | 第 30 章 |
reconciler 内部文件地图
react-reconciler/src/ 下最常见的文件:
| 文件 | 内容 |
|---|
ReactFiberWorkLoop.js | 工作循环:render/commit 的调度中枢 |
ReactFiberBeginWork.js | beginWork 与各 tag 的 updateXxx |
ReactFiberCompleteWork.js | completeWork、bubbleProperties |
ReactFiberCommitWork.js | commit 三阶段、effect 执行 |
ReactFiberHooks.js | 所有 Hooks 的实现 |
ReactFiberRoot.js | FiberRootNode、createFiberRoot |
ReactFiberLane.js | 31 条 lane 的位图 |
ReactChildFiber.js | 单/多节点 diff 算法 |
ReactFiberClassUpdateQueue.js | Update/UpdateQueue 结构、processUpdateQueue |
ReactFiberThrow.js | 错误与挂起的抛出/捕获 |
ReactFiberDevToolsHook.js | 连 DevTools 的探针 |
ReactFiberConfig.js | 占位 shim,运行即抛错 |
读源码的路径建议
- 想搞懂"一次更新":
ReactFiberWorkLoop.js → ReactFiberBeginWork.js → ReactFiberCompleteWork.js → ReactFiberCommitWork.js。
- 想搞懂 Hooks:
ReactFiberHooks.js 一个文件管完。
- 想搞懂 diff:
ReactChildFiber.js。
- 想搞懂优先级:
ReactFiberLane.js + scheduler/。
- 想搞懂 RSC:
react-server/(Flight)+ react-client/。