如何看react源码

阅读 React 源码的步骤

克隆 React 仓库
从官方 GitHub 仓库克隆代码：

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

了解代码结构
React 源码主要分为以下几个核心目录：

• packages/react: 核心 React API 实现
• packages/react-dom: DOM 渲染相关逻辑
• packages/scheduler: 调度器实现
• packages/shared: 共享工具和类型定义

调试源码的方法

使用 yarn link 本地调试
在 React 项目根目录运行：

yarn build
cd build/node_modules/react
yarn link
cd build/node_modules/react-dom
yarn link

在测试项目中链接本地 React：

yarn link react react-dom

通过 VSCode 调试

1. 在 React 项目中配置 launch.json
2. 添加调试配置指向打包后的源码

关键源码切入点

虚拟 DOM 实现
查看 ReactElement.js 和 ReactDOMComponent.js 了解元素创建和 DOM 操作。

调度系统
scheduler 目录下的代码实现了任务调度和时间切片机制。

Hooks 实现
ReactHooks.js 和 Hooks.js 包含 useState、useEffect 等 Hook 的核心逻辑。

学习资源推荐

• 官方代码注释：React 源码包含大量解释性注释
• React 设计理念文档：docs/ 目录下的设计文档
• 社区解析文章：许多开发者写过 React 源码解析博客

注意事项

建议从 React 16+ 版本开始阅读，因为 Fiber 架构的引入使得代码结构更清晰。可以先关注核心流程，再逐步深入细节实现。