了解了源码的文件目录,这一节我们看看如何调试源码。
即使版本号相同(当前最新版为17.0.0 RC
),但是facebook/react
项目master
分支的代码和我们使用create-react-app
创建的项目node_modules
下的react
项目代码还是有些区别。
因为React
的新代码都是直接提交到master
分支,而create-react-app
内的react
使用的是稳定版的包。
为了始终使用最新版React
教学,我们调试源码遵循以下步骤:
- 从
facebook/react
项目master
分支拉取最新源码 - 基于最新源码构建
react
、scheduler
、react-dom
三个包 - 通过
create-react-app
创建测试项目,并使用步骤2创建的包作为项目依赖的包
拉取源码
拉取facebook/react
代码
# 拉取代码
git clone https://github.com/facebook/react.git
# 如果拉取速度很慢,可以考虑如下2个方案:
# 1. 使用cnpm代理
git clone https://github.com.cnpmjs.org/facebook/react
# 2. 使用码云的镜像(一天会与react同步一次)
git clone https://gitee.com/mirrors/react.git
安装依赖
# 切入到react源码所在文件夹
cd react
# 安装依赖
yarn
打包react
、scheduler
、react-dom
三个包为dev环境可以使用的cjs
包。
我们的步骤只包含具体做法,对每一步更详细的介绍可以参考
React
文档源码贡献章节
# 执行打包命令
yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE
如果网络不好,执行yarn
命令无法完成依赖安装,或者执行yarn build
无法完成打包,可以使用我打好的包。版本为17.0.0-alpha.0
地址
现在源码目录build/node_modules
下会生成最新代码的包。我们为react
、react-dom
创建yarn link
。
通过
yarn link
可以改变项目中依赖包的目录指向
cd build/node_modules/react
# 申明react指向
yarn link
cd build/node_modules/react-dom
# 申明react-dom指向
yarn link
创建项目
接下来我们通过create-react-app
在其他地方创建新项目。这里我们随意起名,比如“a-react-demo”。
npx create-react-app a-react-demo
在新项目中,将react
与react-dom
2个包指向facebook/react
下我们刚才生成的包。
# 将项目内的react react-dom指向之前申明的包
yarn link react react-dom
现在试试在react/build/node_modules/react-dom/cjs/react-dom.development.js
中随意打印些东西。
在a-react-demo
项目下执行yarn start
。现在浏览器控制台已经可以打印出我们输入的东西了。
通过以上方法,我们的运行时代码就和React
最新代码一致了。
下一节:JSX作为描述组件内容的数据结构,为JS赋予了更多视觉表现力。在React中我们大量使用他。在深入源码之前,有些疑问我们需要先解决:
JSX和Fiber节点是同一个东西么?
React Component、React Element是同一个东西么,他们和JSX有什么关系?
带着这些疑问,让我们开始这一节的学习。