Front End

[FE] React 初窥门径(三):用 VSCode 调试 W

2021-10-26  本文已影响0人  何幻

1. 回顾

参考 React 初窥门径(一):环境准备

我们已经准备好了两个目录(并设置成了 环境变量):

并设置好了软连接

$ 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 的构建过程进行了调试

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

2. 调试 React 运行时代码

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

我们主要来介绍 .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",
    }
  ]
}

参数说明,

我们在 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';

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

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

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


参考

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

上一篇 下一篇

猜你喜欢

热点阅读