[FE] React 初窥门径（三）：用 VSCode 调试 W

1. 回顾

参考 React 初窥门径（一）：环境准备

我们已经准备好了两个目录（并设置成了 环境变量）：

• ReactProject：React v17.0.2 的源码目录（构建产物会放到 build/ 目录）
• ExampleProject：用 create-react-app 创建的 React 应用（应用启动后监听 3000 端口 http://127.0.0.1:3000）

并设置好了软连接

$ ln -s $ReactProject/build/node_modules/react $ExampleProject/node_modules/react
$ ln -s $ReactProject/build/node_modules/react-dom $ExampleProject/node_modules/react-dom

参考 React 初窥门径（二）：构建过程

我们对 React 的构建过程进行了调试

• 向 React 源码 package.json 中添加 debug-build npm scripts
• 配置 .vscode/launch.json 调用 debug-build 进行调试

并且借用了 VSCode 插件 CodeTour 记录了源码学习过程

• 从 github: thzt/react-tour v17.0.2 拷贝出 .tour/ 文件夹，复制到 React 源码根目录即可

2. 调试 React 运行时代码

本文丰富了 github: thzt/react-tour v17.0.2 的内容，增加了几个文件，

• package.json React v17.0.2 的 package.json，增加了 debug-build npm scripts
• .vscode/ VSCode 调试配置，包括了上文提到了 Debug Build 调试选项，还增加了 Debug React（下文解释）
• .tour/ VSCode 插件 CodeTour 的代码备注内容

我们主要来介绍 .vscode/ 中的 Debug React 配置 .vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug React",
      "url": "http://127.0.0.1:3000",
    }
  ]
}

参数说明，

• type 配置为 chrome，启动调试会打开 chrome，但会使用 VSCode 进行调试
• url 指定为 web 应用的访问地址，这里打开的是 ExampleProject 的访问地址 http://127.0.0.1:3000

我们在 React 构建产物文件 ReactProject/build/node_modules/react/index.js 中打个端点，

然后启动 VSCode Debug React 进行调试，

VSCode 会打开 Chrome 并访问 http://127.0.0.1:3000，
断点定位到了 ReactProject/build/node_modules/react/index.js 第 6 行

这样我们就可用 VSCode 调试 ExampleProject 应用了。

3. react 和 react-dom 的加载过程

import React from 'react';
import ReactDOM from 'react-dom';

会加载 react 和 react-dom，
加载过程通过 CodeTour 写到了这里 github: thzt/react-tour v17.0.2

我们大致看了一遍 react.development.js 和 react-dom.devlopment.js 两个文件的内容，

• react.development.js 共 2,446 行
  包括 React.createElement，React.createContext ReactElement，等方法，
  以及一些 Hooks 方法 useState useCallback useMemo useContext 等

• react-dom.devlopment.js 共 27,351 行
  包括 ReactDOM.render ReactDOM.createPortal 等方法，
  还有大量的代码关于 event commit update fiber 相关的内容。

其中各个方法的具体逻辑，等到实际用到再看。

---

参考

React 初窥门径（一）：环境准备
React 初窥门径（二）：构建过程
github: thzt/react-tour v17.0.2