react源码如何调试

调试 React 源码的方法

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

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

切换到最新稳定分支（如 main 或特定版本标签）。

安装依赖并构建
在项目根目录运行：

yarn install
yarn build --type=UMD

--type=UMD 生成适用于浏览器调试的未压缩版本。

链接本地构建到测试项目

1. 在 React 源码目录运行：

   yarn link

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

   yarn link react react-dom

3. 确保测试项目的 package.json 中移除 React 原有依赖。

启用开发者模式
在测试项目中设置环境变量：

export NODE_ENV=development

或通过 Webpack 配置：

process.env.NODE_ENV = 'development';

使用 Source Map
在构建时生成 Source Map：

yarn build --type=UMD --profile

确保浏览器开发者工具中启用 Source Map 功能。

断点调试

1. 在 Chrome DevTools 的 Sources 面板中找到 react.development.js 或 react-dom.development.js。
2. 直接在源码中设置断点，或通过 debugger 语句触发。

修改源码实时验证
在 React 源码中修改代码后重新构建：

yarn build --type=UMD --watch

测试项目会自动加载最新变更。

使用测试用例调试
运行 React 内部测试套件定位问题：

yarn test --watch

结合 it.only 或 describe.only 聚焦特定测试。

React 内部调试工具
启用 React DevTools 的 "Highlight Updates" 或 "Show Component Filename" 功能辅助定位问题。
在代码中使用 __DEV__ 条件添加调试日志：

if (__DEV__) {
  console.log('Debug info:', data);
}