配置说明
- node v18.19.1
- pnpm v9.7.0
- 通过配置 webpack alias，来实现对源码的映射
- 部分截图使用了SourceTree
- 文章底部有源码链接，源码包含v18.1.0、v19.0.0两个分支，对应debug不同版本
初始化app
使用create-react-app创建项目，依赖使用pnpm，该项目用于测试各个版本的react源码。当前的create-react-app创建的项目react版本还是v18.3.1
// 初始化
npx create-react-app react-debug
// 将配置弹出，该操作不可逆
npm i && npm run eject
// 依赖管理
rm -rf node_modules package-lock.json && pnpm i
对项目的基本配置做些调整，添加reset.css、测试的组件。将该项目commit，提交到远程仓库。
react源码
git clone https://github.com/facebook/react.git
创建新的分支v19.0.0，将源码中的packages文件夹，放到react-debug的src下，调整webpack alias
// config/paths.js
reactSrc: resolveApp("src/packages"),
// config/webpack.config.js
alias: {
"@/components": path.join(paths.appSrc, "components"),
react: path.join(paths.reactSrc, "react"),
"react-dom": path.join(paths.reactSrc, "react-dom"),
"react-client": path.join(paths.reactSrc, "react-client"),
shared: path.join(paths.reactSrc, "shared"),
scheduler: path.join(paths.reactSrc, "scheduler"),
"react-reconciler": path.join(paths.reactSrc, "react-reconciler"),
"react-dom-bindings": path.join(paths.reactSrc, "react-dom-bindings"),
}
修复报错
react、react-dom的引用方式
环境变量
config/env.js
引用失败
这是源码中的变量引用报错了，修复之前先commit下，保存下原始的react代码。
根据路径，找到报错的文件./src/packages/shared/ReactSharedInternals.js。我是对比之前调试react版本v18.1.0，修复的该问题
// v18.1.0
import ReactSharedInternals from 'react/src/ReactSharedInternals'
发现v19.0.0没有了该文件，但是发现有两个比较相似的ReactSharedInternalsClient.js、ReactSharedInternalsServer.js，我们是在浏览器调试的spa引用，就改成client这份
语法错误
问了下gpt，给出的原因是语法错误，先简单修复下
Scheduler变量报错
该问题也是参考调试v18.1.0版本的方法
ReactFiberConfig
同样参考调试v18.1.0版本的方法
// v18.1.0
export * from "./forks/ReactFiberHostConfig.dom";
但是发现v19.0.0源码已经没有了该文件，根据其内容进行全局搜索，发现 react-dom-bindings/src/client/ReactFiberConfigDOM 内容与之相同。
发现有了新的报错，继续查找bindToConsole
发现在ReactClientConsoleConfigBrowser.js、ReactClientConsoleConfigServer.js，我们依旧选择使用适用于浏览器的ReactClientConsoleConfigBrowser.js。
该文件还引用了ReactFiberConfigDOM.js。我们将ReactFiberConfig.js的引用载替换下
eslint报错
我们先将eslint的报错关掉
React DevTools
把他也关掉吧，我平时没怎么用过
