调试react源码

2,033 阅读1分钟

前言

本篇主要介绍如何调试react源码

  • react版本使用17.0.2;
  • 需要安装Java的JDK 用于打包
  • node版本在14+

下载react源码

作者当前在git文件夹下执行下面的命令

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

当看控制台看到下图时,react源码下载成功

image.png

cd react

执行yarn

yarn

执行打包命令

yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE

当看到下面的图片你应该打包成功了

image.png

修改react和react-dom指向

此事通过yarn link创建本地依赖指向

修改react

执行:

cd build/node_modules/react
yarn link

看到下图应该是创建成功了。

image.png

修改react-dom

退出当前文件夹

cd .. 

进入react-do文件夹

cd react-dom

执行 yarn link

yarn link

看到下图说明成功了 image.png

创建react项目

使用create-react-app创建一个名为react-code(此处名字可以自取)项目

看到下图说明react创建成功

image.png

进入react-code项目

cd react-code

切换react和react-dom指向

yarn link react react-dom

测试

在git/react/build/node_modules/react/cjs/react.development.js文件中添加

注意:这是下载react源码的路径,git文件夹下react源码路径!!!

image.png

启动react-code

观察控制台是否打印出100

image.png

作者已经可以调试react源码了,如有需求你也试试吧

结语

作者水平有限,如有不足欢迎指正;任何意见和建议欢迎评论区浏览讨论