React 源码调试 (react版本17.0.2)
2023-05-20 23:40 Bryran 阅读(461) 评论(0) 编辑 收藏 举报环境准备
// create-react-a匹配版本 $ create-react-app -V 5.0.1 // node 版本 $ node -V v16.16.0
1、第一步 通过 create-react-app 快速创建环境,然后运行 yarn eject 释放webpack配置
npx create-react-app react-debug
npm run eject
2、第二步 降级react、react-dom版本
npm install react@17.x react-dom@17.x --save
修改index.js文件内容
![](https://img2023.cnblogs.com/blog/242969/202305/242969-20230520233843434-1195363413.png)
3、运行npm run start
此时已经具有了调试打包后代码能力
好了。 为了 能调试 源码 我们继续
第三步 先在src目录下 下载react 17.0.2版本的代码
cd src git clone -b v17.0.2 --depth=1 git@github.com:facebook/react.git
第四步 进行配置
webpack 配置路径
config/webpack.config.js添加alias
{ alias: { ... 'react': path.resolve(__dirname, '../src/react/packages/react'), 'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'), 'shared': path.resolve(__dirname, '../src/react/packages/shared'), 'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'), 'legacy-events': path.resolve(__dirname,'../src/react/packages/legacy-events'), scheduler: path.resolve(__dirname, '../src/react/packages/scheduler'), } }
关闭esline
const disableESLintPlugin = true;
添加环境变量
const stringified = { __DEV__: true, __PROFILE__: true, __UMD__: true, __EXPERIMENTAL__: true, ... };
修改index.js中react、react-dom的引入
解决报错修改的一些文件
文件1 src/react/packages/scheduler/index.js
//添加以下 export { unstable_flushAllWithoutAsserting, unstable_flushNumberOfYields, unstable_flushExpired, unstable_clearYields, unstable_flushUntilNextPaint, unstable_flushAll, unstable_yieldValue, unstable_advanceTime } from './src/SchedulerHostConfig.js';
文件2 src/react/packages/shared/invariant.js
if (condition) { return; }
文件3 src/react/packages/react-reconciler/RectFiberHostConfig.js
export * from './forks/ReactFiberHostConfig.dom';
文件4 src/react/packages/shared/RectSharedInternals.js
import ReactSharedInternals from '../react/src/ReactSharedInternals'
文件5 src/react/packages/scheduler/src/SchedulerFeatureFlags.js
export const enableProfiling = true;
文件6 src/react/packages/scheduler/src/SchedulerHostConfig.js
export { unstable_flushAllWithoutAsserting, unstable_flushNumberOfYields, unstable_flushExpired, unstable_clearYields, unstable_flushUntilNextPaint, unstable_flushAll, unstable_yieldValue, unstable_advanceTime } from './forks/SchedulerHostConfig.mock.js'; export { requestHostCallback, requestHostTimeout, cancelHostTimeout, shouldYieldToHost, getCurrentTime, forceFrameRate, requestPaint } from './forks/SchedulerHostConfig.default.js';
修改完以上文件,先运行 npm run start, 正常启动后。再进行debug.
最终效果