前言

这是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官网 已经提供了调试方法，我们按照官方方法来操作一下。

为源码建立软链

// 构建源码
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 还没有安装； 进入 Java官网 下载安装完成后，再次尝试构建；

创建项目

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

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

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

// 启动项目
yarn start

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

小结

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

React源码系列

• React源码系列(一)：React设计理念&架构
• React源码系列(二)：虚拟DOM与其价值