即使版本号相同(当前最新版为),但是facebook/react项目master分支的代码和我们使用create-react-app创建的项目node_modules下的react项目代码还是有些区别。

    因为React的新代码都是直接提交到master分支,而create-react-app内的react使用的是稳定版的包。

    为了始终使用最新版React教学,我们调试源码遵循以下步骤:

    1. facebook/react项目master分支拉取最新源码
    2. 基于最新源码构建reactschedulerreact-dom三个包
    3. 通过create-react-app创建测试项目,并使用步骤2创建的包作为项目依赖的包

    拉取代码

    安装依赖

    1. # 切入到react源码所在文件夹
    2. # 安装依赖
    3. yarn

    网络不好的同学看这里

    如果网络不好,执行yarn命令无法完成依赖安装,或者执行yarn build无法完成打包,可以使用我打好的包。

    版本为17.0.0-alpha.0

    通过yarn link可以改变项目中依赖包的目录指向

    1. cd build/node_modules/react
    2. # 申明react指向
    3. cd build/node_modules/react-dom
    4. # 申明react-dom指向
    5. yarn link

    创建项目

    接下来我们通过create-react-app在其他地方创建新项目。这里我们随意起名,比如“a-react-demo”。

    在新项目中,将reactreact-dom2个包指向facebook/react下我们刚才生成的包。

    1. # 将项目内的react react-dom指向之前申明的包
    2. yarn link react react-dom

    现在试试在react/build/node_modules/react-dom/cjs/react-dom.development.js中随意打印些东西。

    a-react-demo项目下执行yarn start。现在浏览器控制台已经可以打印出我们输入的东西了。