前言

React Hooks发布以来，涌现了很多关于React Hooks 源码解析的文章。本文（基于v18.0.0-rc.0）就以我自己读源码过程来写一篇记录文章。希望可以帮助大家对React Hooks的学习与理解。主要对常用Hooks中的 useState、useReducer、useEffect 进行学习记录。

从搭建调试环境开始

首先通过脚手架 create-react-app 创建一个项目，并暴露 webpack 配置：

npx create-react-app react-debug
cd ./react-dev 
yarn eject

下载源码：

git clone https://github.com/facebook/react.git

将react包拷贝到项目src下，修改 webpack 的配置，把引用指向项目下的react,在 `config/webpack.config.js` 的 `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"

关闭eslint,加个false

开始解决错误

Scheduler.js

提示找不到 unstable_yieldValue，unstable_yieldValue,我们就换个依赖引入，问题解决。

- import * as Scheduler from 'scheduler';

+ import * as Scheduler from '../../scheduler/src/forks/SchedulerMock';

ReactSharedInternals.js

浏览器报错提示找不到 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,找到源头此常量其实就是 ReactSharedInternals,替换掉，问题解决。

- import * as React from 'react';

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

- const ReactSharedInternals =
 React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;

ReactFiberHostConfig.js

浏览器直接抛错误，看了代码里面就是个throw,替换成真正的./forks/ReactFiberHostConfig.dom，问题解决。

- throw new Error('This module must be shimmed by a specific renderer.');

+ export * from './forks/ReactFiberHostConfig.dom'

总结

到此错误解决完毕，终于可以愉快的调试代码了。

React18 源码弃坑指南（一）-- 调试环境搭建

前言