一、作者背景
作者是23年6月份毕业的前端开发，入职了一家小公司，主要用的技术栈是react全家桶，23年2月开始的实习，写了一年多的项目以后，自认为对react18在开发中用的到的渲染原理都掌握的差不多了，大概是什么程度呢（菜鸟程度），简单描述一下，就是项目中的组件渲染几次以及某个组件为什么渲染我基本可以掌握，可以做一些组件的优化工作。出于想要学习react哲学与设计思想的想法，我就对react源代码产生了兴趣。（插一句题外话，其实去年刚开始实习的时候，应付一些不是很难的项目需求我都像生死决战的时候，也许是初生牛犊不怕虎我猪油蒙了心，就想要对源码动手动脚，现在想想简直是big胆，但是当时水平太差了，动手能力也差，于是搜索引擎上搜了一下，发现步骤很多于是哥们就原地作罢了，相信会这样的不止我一个（手动狗头））。时至今日毕竟是代码写多了，量变产生big便，思路打开了，就给在座的各位想要调试代码同僚分享一下本菜菜如何调试react的源代码。
二、源码调试思路
- 推荐可以先花一些时间阅读一下卡颂老师react技术揭秘，更有能力的强者也可以阅读一下英文的build-your-react理解一下react的一些工作原理，原理再结合源码调试的实践可以帮助初学者更好理解react的设计思想和运行原理。
- 怎么搭建从零搭建一个react源码调试项目可以看看冴羽老师的React 之如何调试源码写的十分的清晰易懂跟着操作就好了。
- 我直接给大家分享一个老哥写的已经创建好的debug项目，懒得操作的直接clone就行运行就行，老哥（luxi）很贴心的给大家打了各种输出方便大家定位，有帮助的话，大家可以去他项目点点star。
三、具体步骤
下载代码
git clone https://github.com/luxi-record/react-sourceCodeDebug.git
npm install
npm run dev
react 此仓库提供调试 源码版本:18.0.0
webstorm编辑器下创建Javascript调试环境（webstorm 版本 2024.1.3。附上官方文档，大家自由探索。）
- 运行项目
- 点击编辑配置
- 点击加号
- 选择JavaScript调试
- 这两个运行地址挑一个复制
- 粘贴进URL框里
- 在你想要查看的地方打上断点
- 点击这个小虫子一样的图标
9.正常的话，会弹出一个单独的谷歌网页运行你的项目，这个时候就可以使用debug操作区愉快的玩耍了。
vscode编辑器下创建Javascript调试环境（vscode版本 版本: 1.89.0。作者使用较少，所以提供简单方案。附上官方文档地址，大家可以自己探索。）
- 和webstorm一样，先运行项目
- 点这个虫子图标
- 点运行和调试
- 调试器选择（web应用Chrome）
- 点击这个设置图标
- 把项目启动地址复制到设置文件的url属性里
- 在想要查看的源码部分打上断点
- 点图中这个地方启动，就可以使用debug操作区快乐玩耍了
