React 源码调试 (react版本17.0.2)

环境准备

// 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文件内容

 

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.

 

 

 

 最终效果