react如何看源代码

查看 React 源代码的方法

克隆 React 官方仓库
React 的源代码托管在 GitHub 上，可以通过以下命令克隆仓库到本地：

git clone https://github.com/facebook/react.git

克隆后，切换到目标版本分支或标签，例如：

git checkout v18.2.0

在线浏览源代码
直接访问 React 的 GitHub 仓库页面（https://github.com/facebook/react），通过文件浏览器查看代码结构。核心代码位于 packages/react 和 packages/react-dom 目录。

使用调试工具
在开发环境中，通过 Chrome DevTools 的 “Sources” 面板可以调试 React 的运行时代码。启用“Pause on exceptions”或设置断点，逐步跟踪执行流程。

阅读编译后的代码
通过 CDN 引入的开发版 React（如 react.development.js）包含未压缩的源代码注释，适合直接阅读。例如：

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>

重点目录解析

核心模块路径

• packages/react/src: 包含 React 核心 API 和协调算法（Reconciliation）的实现。
• packages/react-dom/src: 包含 DOM 渲染器和浏览器相关逻辑。
• packages/scheduler: 调度器实现，控制任务优先级。

关键文件示例

• ReactHooks.js: Hook 机制的实现。
• ReactFiberWorkLoop.js: Fiber 架构的任务调度循环。
• ReactDOMHostConfig.js: DOM 渲染的宿主配置。

辅助工具推荐

代码搜索工具
使用 VS Code 的 “Go to Definition” 功能或 rg（ripgrep）命令行工具快速定位代码：

rg "useState" packages/react/src

构建本地版本
参考仓库中的 CONTRIBUTING.md 文件，运行构建命令生成可调试的本地版本：

yarn build

官方文档参考
React 代码库中的 docs 目录包含内部设计文档，如 Fiber 架构的详细说明（fiber-principles.md）。