前言

之前在阅读React源码的时候，想调试一下，然后debugger看看变量已经数据是怎么传递的，无奈。还要装这么多东西。踩了不少坑，记录一下。帮助大家少踩坑，也为自己做一个笔记。

准备工作

Node v8.0.0+、Yarn v1.2.0+。
已安装 JDK。
你已安装 gcc（或者你在有必要安装编译器的情况下也不觉得麻烦），因为一些依赖可能得经过编译，而在 OS X，Xcode 命令行工具会帮你处理；在 Ubuntu，apt-get install build-essential 会安装所需的 package（其它 Linux 发行版的类似命令也有效）；在 Windows 上得做些额外步骤，请参考 node-gyp 安装步骤。
熟悉 Git。
一个可以运行React项目（本文采用create-react-app）

开始

1.获取源代码

打开源码地址：https://github.com/facebook/react
克隆到自己的本地
1. 可以下载zip解压
2. 也可以Fork到自己的GitHub然后Clone
  1. 个人建议是Fork，然后可以修改，添加注释等等。可以记录一下自己学习历程
3. 也可以直接Clone

2. 建立依赖连接

打开项目
运行yarn安装依赖
运行yarn build react/index,react/jsx,react-dom/index,scheduler --type=NODE重新打包
cd build/node_modules/react进入React这个包内部
yarn link建立连接
cd 到原来的项目路径返回，为了下一次进入react-dom做准备
cd build/node_modules/react-dom
yarn link

3.找到一个可以调试的React项目

这里我采用的是create-react-app

npx create-react-app my-app
cd my-app

4. 连接项目和React库

删除刚刚建立的项目的node_modules中的react和react-dom
打开React项目
yarn link react react-dom

5. 开始调试

打开我们clone的项目

找到想要调试的地方

这里改的地方是packages/react-dom/src/client/ReactDOMLegacy.js
内容如下

export function render(
  element: React$Element<any>,
  container: Container,
  callback: ?Function,
) {
+  console.log(222);
  if (__DEV__) {
    console.error(
      'ReactDOM.render is no longer supported in React 18. Use createRoot ' +
        'instead. Until you switch to the new API, your app will behave as ' +
        "if it's running React 17. Learn " +
        'more: https://reactjs.org/link/switch-to-createroot',
    );
  }

  invariant(
    isValidContainerLegacy(container),
    'Target container is not a DOM element.',
  );
  if (__DEV__) {
    const isModernRoot =
      isContainerMarkedAsRoot(container) &&
      container._reactRootContainer === undefined;
    if (isModernRoot) {
      console.error(
        'You are calling ReactDOM.render() on a container that was previously ' +
          'passed to ReactDOM.createRoot(). This is not supported. ' +
          'Did you mean to call root.render(element)?',
      );
    }
  }
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}