了解了源码的文件目录，这一节我们看看如何调试源码。

即使版本号相同（当前最新版为17.0.0 RC），但是facebook/react项目master分支的代码和我们使用create-react-app创建的项目node_modules下的react项目代码还是有些区别。

因为React的新代码都是直接提交到master分支，而create-react-app内的react使用的是稳定版的包。

为了始终使用最新版React教学，我们调试源码遵循以下步骤：

  1. 从facebook/react项目master分支拉取最新源码
  2. 基于最新源码构建react、scheduler、react-dom三个包
  3. 通过create-react-app创建测试项目，并使用步骤2创建的包作为项目依赖的包

拉取源码

拉取facebook/react代码

  1. # 拉取代码
  2. git clone https://github.com/facebook/react.git
  4. # 如果拉取速度很慢，可以考虑如下2个方案：
  6. # 1. 使用cnpm代理
  7. git clone https://github.com.cnpmjs.org/facebook/react
  9. # 2. 使用码云的镜像（一天会与react同步一次）
  10. git clone https://gitee.com/mirrors/react.git

安装依赖

  1. # 切入到react源码所在文件夹
  2. cd react
  4. # 安装依赖
  5. yarn

打包react、scheduler、react-dom三个包为dev环境可以使用的cjs包。

我们的步骤只包含具体做法，对每一步更详细的介绍可以参考React文档源码贡献章节调试源码 - 图1 (opens new window)

  2. # 执行打包命令
  3. yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE

网络不好的同学看这里

如果网络不好，执行yarn命令无法完成依赖安装，或者执行yarn build无法完成打包，可以使用我打好的包。

版本为17.0.0-alpha.0

地址调试源码 - 图2 (opens new window)

现在源码目录build/node_modules下会生成最新代码的包。我们为react、react-dom创建yarn link。

通过yarn link可以改变项目中依赖包的目录指向

  1. cd build/node_modules/react
  2. # 申明react指向
  3. yarn link
  4. cd build/node_modules/react-dom
  5. # 申明react-dom指向
  6. yarn link

创建项目

接下来我们通过create-react-app在其他地方创建新项目。这里我们随意起名，比如“a-react-demo”。

  1. npx create-react-app a-react-demo

在新项目中，将react与react-dom2个包指向facebook/react下我们刚才生成的包。

  1. # 将项目内的react react-dom指向之前申明的包
  2. yarn link react react-dom

现在试试在react/build/node_modules/react-dom/cjs/react-dom.development.js中随意打印些东西。

在a-react-demo项目下执行yarn start。现在浏览器控制台已经可以打印出我们输入的东西了。

通过以上方法，我们的运行时代码就和React最新代码一致了。