源码调试

方法一：

clone源码：git clone https://github.com/facebook/react.git
依赖安装：npm install or yarn
build源码：npm run build react/index,react/jsx,react-dom/index,scheduler --type=NODE
为源码建立软链：
cd build/node_modules/react
npm link
cd build/node_modules/react-dom
npm link
npx create-react-app demo
npm link react react-dom

方法二：https://github.com/Terry-Su/debug-react-source-code
方法三：【推荐】：结合create-react-app

在git地址上先下载源码
安装脚手架
暴露配置 ```javascript // 使用npm添加 npx create-react-app my-debug-react // 使用yarn添加 yarn create react-app my-app

// 如果npm命令安装，则使用下面的命令暴露配置 npm run eject // 如果yarn命令安装，则使用下面的命令暴露配置 yarn eject


4. 在项目的src中新建react文件夹，将从仓库拷贝的代码中的整个packages包， 复制到src/react目录下
4. 修改config/webpack.config.js
```javascript
resolve: {
    alias: {
        'react-native': 'react-native-web',
        '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'),
         //'react-events': path.resolve(__dirname, '../src/react/packages/events')
    }
}

修改config/env.js

const stringified = {
__DEV__: true,
__PROFILE__: true,
__UMD__: true,
__EXPERIMENTAL__: true,
'process.env': Object.keys(raw).reduce((env, key) => {
 env[key] = JSON.stringify(raw[key])
 return env
}, {})
}

根目录创建.eslintrc.json文件

{
"extends": "react-app",
"globals": {
 "__DEV__": true,
 "__PROFILE__": true,
 "__UMD__": true,
 "__EXPERIMENTAL__": true   
}
}

添加flow的类型判断
npm i @babel/plugin-transform-flow-strip-types -D

{
           test: /\.(js|mjs|jsx|ts|tsx)$/,
           include: paths.appSrc,
           loader: require.resolve('babel-loader'),
           options: {
             customize: require.resolve(
               'babel-preset-react-app/webpack-overrides'
             ),

             plugins: [
               require.resolve('@babel/plugin-transform-flow-strip-types'),
               [
                 require.resolve('babel-plugin-named-asset-import'),
                 {
                   loaderMap: {
                     svg: {
                       ReactComponent:
                         '@svgr/webpack?-svgo,+titleProp,+ref![path]'
                     }
                   }
                 }
               ]
             ],
             // This is a feature of `babel-loader` for webpack (not Babel itself).
             // It enables caching results in ./node_modules/.cache/babel-loader/
             // directory for faster rebuilds.
             cacheDirectory: true,
             // See #6846 for context on why cacheCompression is disabled
             cacheCompression: false,
             compact: isEnvProduction
           }
         },

src\packages\react-reconciler\src\ReactFiberHostConfig.js, 导出HostConfig ```javascript // import invariant from ‘shared/invariant’; // invariant(false, ‘This module must be shimmed by a specific renderer.’);

export * from ‘./forks/ReactFiberHostConfig.dom’

修改 `src\react\packages\shared\ReactSharedInternals.js`
```javascript
// import React from 'react';

// const ReactSharedInternals =
//     React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

import ReactSharedInternals from '../react/src/ReactSharedInternals'

vscode中安装flowtype.flow-for-vscode 插件
添加工作台配置settings.json

"javascript.validate.enable": false,
"typescript.validate.enable": false,

修改src/index.js文件中的引入方式

如果有一堆eslint报错,把webpack.config文件中的eslint关闭

// const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';

const disableESLintPlugin = true;

启动项目就ok了~~

https://github.com/Terry-Su/debug-react-source-code

工具推荐

给大家推荐几个看源码的好用的工具

BookMarks

vscode插件提供书签功能，快速定位标记处

GIPHY CAPTURE

gif图制作工具 appStore 免费下载使用

画图工具

我所在公司的内部学诚画图很好用
但是也推荐大家其他比较好用的画图工具吧

流程图架构图 processon
思维导图 xmind

源码解读参考

https://github.com/7kms/react-illustration-series
https://github.com/neroneroffy/react-source-code-debug/tree/master/docs
源码分析：react hook 最佳实践
 React技术揭秘
 https://pomb.us/build-your-own-react/
https://github.com/neroneroffy/react-source-code-debug

源码系列