跳到主要内容

附录 B:React 19 源码包结构导航图

读源码时对照这张表,快速定位"这个功能在哪个包"。

核心包

干什么主要章节
react对外 API、Hooks 的入口第 2、12~16 章
react-reconciler核心中的核心:Fiber、工作循环、diff、调度全书主线
react-dom浏览器渲染器入口、createRoot第 1 章
react-dom-bindingsDOM 操作、合成事件、host config第 18、19、34 章
scheduler任务调度、时间切片第 5 章
shared跨包共享的工具和常量(ReactSymbols 等)各章

RSC 相关

干什么主要章节
react-server服务端渲染(Fizz/SSR + Flight)第 30 章
react-client客户端消费 flight payload第 30 章
react-server-dom-webpackRSC 与打包器的桥(webpack 集成)第 30 章

reconciler 内部文件地图

react-reconciler/src/ 下最常见的文件:

文件内容
ReactFiberWorkLoop.js工作循环:render/commit 的调度中枢
ReactFiberBeginWork.jsbeginWork 与各 tag 的 updateXxx
ReactFiberCompleteWork.jscompleteWork、bubbleProperties
ReactFiberCommitWork.jscommit 三阶段、effect 执行
ReactFiberHooks.js所有 Hooks 的实现
ReactFiberRoot.jsFiberRootNode、createFiberRoot
ReactFiberLane.js31 条 lane 的位图
ReactChildFiber.js单/多节点 diff 算法
ReactFiberClassUpdateQueue.jsUpdate/UpdateQueue 结构、processUpdateQueue
ReactFiberThrow.js错误与挂起的抛出/捕获
ReactFiberDevToolsHook.js连 DevTools 的探针
ReactFiberConfig.js占位 shim,运行即抛错

读源码的路径建议

  • 想搞懂"一次更新":ReactFiberWorkLoop.jsReactFiberBeginWork.jsReactFiberCompleteWork.jsReactFiberCommitWork.js
  • 想搞懂 Hooks:ReactFiberHooks.js 一个文件管完。
  • 想搞懂 diff:ReactChildFiber.js
  • 想搞懂优先级:ReactFiberLane.js + scheduler/
  • 想搞懂 RSC:react-server/(Flight)+ react-client/