为什么自己新写的代码不能打断点_不要只看别人的源码分析文章, 你应该学会自己看源码~...

1. 看源码早已是个过时的话题了, 各路大神每天都能写出很多分析源码的文章, 比如分析React Fiber、
重写react-redux之类的文章满天飞. 
2. 但是却很少有人分析怎么看源码. 前段时间我自己琢磨了一套看源码的方案, 目前我已将它运用到preact
源码的阅读中, 并且已顺利的读懂preact内部运行机制, 经过这次实践我认为这套方案还算靠谱, 所以特地
来给大家分享一下~

方案很简单, 只需简单的几个步骤, 但是在分享我的方案前, 我觉得有必要提几个点:

首先, 我为什么要读这个源码?

答案当然是问题驱动: 拿我自己举例子, 我在过去1年多, 读过redux、react-redux, antd、antd·mobile部分组件, create-react-app, 再到现在的preact. 无一例外, 我都是为了搞懂某个问题.

比如redux、react-redux, 因为我当时有个疑惑, 为什么当我dispatch的时候, reducer会执行, 又为什么页面会自动刷新. 所以带着这两个问题, 我读了它们的内部源码.

再比如antd, antd·mobile, 这是因为我觉得antd组件库的效果很棒我想学习一下内部实现, 并且刚好工作中也需要(我们实现了自己内部的一套组件库,可以借鉴优秀的思路). 所以这算是兴趣驱动, 以及工作需要.

再比如preact源码, 一样还是问题驱动, 我好奇render将虚拟dom渲染成真实的dom添加到页面上的这一过程, 以及setState是如何触发页面更新, diff又是个怎样的流程, 再以及当下热点话题的hooks, 为什么组件能这么写, hooks内部到底做了啥? 同样, 我阅读preact源码还是问题驱动.

总之, 没有目的的阅读源码, 都归咎于一个人(袁隆平院士).

纯属调侃哈~~

其次, 明确该怎么看源码?

1.确定好你想阅读的代码版本: 你需要根据自己的实际情况确定好版本, 比如说你想看16.8之后react新添加的hooks, 那么你就需要下载>=16.8的版本.

2. 找准切入点: 其实切入点很好找, 就是我们心中的那个疑惑, 比如preact的render是怎样能将虚拟dom渲染到页面上, 或者setState是怎样触发更新.

所以你只需要打开源码, 全局搜索某个api, 或者从入口文件逐步深入搜索. 也就是找到我们阅读源码的起始点, 而不是拿起源码就从头开始刷一遍, 那样即耗时, 又会增加阅读难度.

3.在某些特殊情况下, 可以适当的选择降级方案: 比如react源码过于复杂, 而我们如果只是想了解其内部机制(如diff), 但是在react中的diff操作夹杂了Fiber, 而Fiber又及其庞大复杂, 这势必增加了阅读的成本与难度, 所以此时我们可以选择react-like框架, 因为它们都只是实现react的核心功能, 你看懂它们就基本可以代表你已经读懂了没有Fiber的react. (其实这一点完全是因为我自己看不懂React Fiber源码强行加的)

好了, 讲了这么多铺垫(废话), 让我来给大家呈上我阅读源码的方法论吧:

这里我拿我最近阅读preact源码来举例子:

1.首先搭个项目运行的架子, 用啥都行, 脚手架也行, 自己动手从零开始也行. 然后安装好preact, 再写个页面, 保证能跑起来;

2. 找到node_modules/preact

这是最重要的一个环节, 因为我们阅读源码最理想的方式必然是将项目运行起来, 在真实的代码场景中打断点. 要做到这一点, 你需要做2件事:

1️⃣首先确保项目开启source-map

2️⃣进入node_modules/preact/package.json, 修改main、module、umd:main、source等字段.如下图(修改前, 修改后)

因为在项目运行时, webpack会根据以上几个字段引入源代码, 它们有优先级, 所以其实不用全部改, 不过我有强迫症(我并不知道他们的优先级-.-); 对比修改前和修改后, 修改前webpack会引入dist目录下的代码, 也就是经过编译了; 而修改后, 则是引入没有经过编译的源代码.

然后在代码中打上debugger, 你就可以端起一杯咖啡, 在控制台中慢慢品读你青睐的源码了.

如上图, 及时原汁原味的preact了, 你可以在这里为所欲为.右边还有调用栈, 利用好它能加速你对代码的理解.

---

好了, 阅读源码的方法论到这就结束了, 接下来我还想吹个逼, 其实一年前, 我看源码的方式真的很硬核,就拿redux, react-redux来说, 我从github拉下最新代码, 就直接在VSCode里看了起来, 真的就是干看, 毫无方法论, 代码运行的逻辑逻辑全靠在脑子想象.

当然任何方法, 只有适合自己的才是最好的, 我相信很多厉害的人都有自己的一套学习方式, 可能比我这个好很多, 不过我能力有限, 这个方法是我目前能力范围内想到最好的方法了, 希望能帮助那些和我一样, 喜欢阅读源码, 但是阅读姿势不佳的小伙伴, 希望能帮到部分人~~~

最后, 分享不易, 觉得有收获的小伙伴帮忙点个赞吧~~~