clone 下来，就可以开始调试React源码

关键词：react-18.2.0;源码;开箱即用

缘起

大半年前无聊跑去看react源码。网络上找了很多资料，捣鼓捣鼓，打包，改配置，别不信神仙来了也得花1小时。

本着为人民群众省1小时的朴素愿望，这里直接丢地址，分享给大家。

拿去

啰嗦提示：影响脑含氧量概不负责。

• 地址： raotaohub/as-you-see-react: 调试react源码的模板 (github.com)
• 包含1个react源码文件夹过滤了一些东西，根据需要你可以再删删。
• 包含1个cra创建的web工程文件。
• 配置好了vscode调试工具。

原理

直接拿肯定觉得没意思，告诉你原理白嫖就安心了。

思路：

1. clone react 源码，并通过调整打包配置，打包出不压缩的代码及其.map.js文件。
2. 通过 webpack resolve.alias 属性改变各个react核心库依赖包的指向。这里就指向到第一步打包出的产物。
3. 该产物，其同目录下包含对应的.map.js 文件，vs code和浏览器通过读取就能还原源码位置。

这种方式有2个好处。

1. 在调试时会跳转到react源码的具体的单个文件中，可以更好梳理不同模块与之对应的功能，其命名含义。

2. 比起看单文件10w行代码更有价值，可以在源码里写注释做各种记号（注意不要增删代码行数，否则位置映射会不准）。

小提示

1. 可以先看看其他人的分析文章，多看火焰图，多看调用栈，多利用VScdoe插件来辅助做记号。
2. react中有一些 hostconfig 命名的文件，指的是不同环境下指向不同的模块。因为这玩意儿不单单要在浏览器上跑。多看看就会明白他的命名规则。可以调一下，不过我现在还没时间弄他。
3. 你可以用 ChatGPT 来问他一些名词含义，或者做翻译用，七七八八能答上来，帮助你自己阅读源码。
4. 源码看完过几个月，也就忘得差不多了，就剩个感觉。不过确实能提升你阅读代码的能力，别的我也不知道有啥用。

最后再啰嗦一下，闲的慌就拿去玩玩，直接clone食用。

项目地址： raotaohub/as-you-see-react: 调试react源码的模板 (github.com)

授之于鱼叉（不是DOTA2-7.33那个）

想自己动手从0搞的看下面2个大佬的文章。

zxg_神说要有光

React 源码学习进阶篇（一）新版 React 如何调试源码？ (qq.com)