React源码系列(三):源码调试

2,034 阅读2分钟

前言

这是React源码系列专栏的第三篇文章,预计写10篇左右,之前的文章请查看文末,通过本专栏的学习,相信大家可以快速掌握React源码的相关概念以及核心思想,向成为大佬的道路上更近一步;

本章我们学习如何调试源码,本系列源码基于v18.2.0版本;

源码下载

// 下载源码
git clone https://github.com/facebook/react.git

// 进入源码目录
cd react

// 切换分支
git checkout v18.2.0

// 安装依赖
yarn

目录解析

源码中主要包括如下部分

  • fixtures:为代码贡献者提供的测试React
  • packages:主要部分,包含Scheduler,reconciler等
  • scripts:react构建相关

本课程我们只关注 packages 包中以下目录:

  • react:包含 React.createElement、React.Component 等核心api
  • scheduler:调度器相关
  • react-reconciler:协调

怎样调试源码

我们可以看到 React官网 已经提供了调试方法,我们按照官方方法来操作一下。 image.png

为源码建立软链

// 构建源码
npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE

// link react
cd build/node_modules/react
npm link

// link react-dom
cd build/node_modules/react-dom
npm link

需要注意构建的时候报了这样的错误,就说明 JDK 还没有安装; image.png 进入 Java官网 下载安装完成后,再次尝试构建; image.png

创建项目

1、我们在构建的源码包下打印一段代码; image.png 2、我们基于 create-react-app来创建一个项目;

// 创建项目
npx create-react-app demo

// 应用软链
npm link react react-dom

// 启动项目
yarn start

3、启动项目,如果控制台出现打印的内容则代表成功,就可以开启源码调试了! image.png

小结

本章我们学习了如何调试React源码,接下来的文章将进入源码调试阶段,欢迎继续跟随本专栏一起学习;

React源码系列