如何看react源码

阅读React源码的方法

克隆React仓库 从GitHub克隆React的官方仓库，切换到稳定版本分支。React采用Monorepo结构，核心代码在packages/react和packages/react-dom中。

理解代码结构 重点关注react/src下的核心模块：React.js包含API入口，ReactHooks.js定义Hook机制，ReactElement.js处理元素创建。react-reconciler包实现Fiber架构。

调试工具配置 使用source-map-loader配合Webpack，或直接在浏览器调试打包后的开发版React。通过React DevTools的组件树定位具体实现代码位置。

核心模块分析

Fiber架构解析 从ReactFiber开头的文件入手，ReactFiberWorkLoop.js包含任务调度循环，ReactFiberBeginWork.js处理渲染阶段。Fiber节点结构定义在ReactInternalTypes.js。

事件系统 ReactDOMEventProperties.js注册事件类型，legacy-events文件夹包含合成事件实现。事件委托机制在ReactDOMComponentTree.js中处理。

Hooks实现 ReactFiberHooks.js是Hook核心，useState等具体实现在ReactHooks.js。注意dispatcher机制和currentDispatcher的切换逻辑。

辅助工具与技术

构建源码 使用yarn build命令生成带sourcemap的开发版本。--type=UMD参数生成浏览器可直接引用的版本。

测试用例参考 __tests__目录下的单元测试是理解功能的绝佳文档。例如ReactHooks-test.js包含各种Hook的边界用例。

调用栈分析 通过性能分析工具记录组件更新过程，结合源码中的__DEV__断言信息追踪执行路径。重点关注beginWork/completeWork的调用链路。

关键调试技巧

断点设置 在renderWithHooks函数设置断点观察Hook调用栈。在scheduleUpdateOnFiber打断点追踪更新发起过程。

最小复现 修改fixture中的示例代码，配合构建出的本地React版本验证理解。优先研究简单场景如函数组件状态更新。

版本对比 利用Git历史查看重要特性的演进，如Concurrent Mode的实现变化。注意major版本之间的架构差异。