即使版本号相同(当前最新版为),但是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创建的包作为项目依赖的包
拉取代码
安装依赖
# 切入到react源码所在文件夹
# 安装依赖
yarn
网络不好的同学看这里
如果网络不好,执行yarn
命令无法完成依赖安装,或者执行yarn build
无法完成打包,可以使用我打好的包。
版本为17.0.0-alpha.0
通过
yarn link
可以改变项目中依赖包的目录指向
cd build/node_modules/react
# 申明react指向
cd build/node_modules/react-dom
# 申明react-dom指向
yarn link
创建项目
接下来我们通过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
。现在浏览器控制台已经可以打印出我们输入的东西了。