如何看源码

一、前言

对问题的探索既要知其然，也要知其所以然。从事 IT 开发工作者如果不想仅停留在“码农”、“搬砖”、“造轮子”的层面上，对框架和工具的源码研究必不可少。本人作为前端开发，研究过主流框架 React 源码、打包工具 Webpack 源码、常用组件 Ant Design 源码等，以个人经验总结出以下源码研究流程，以兹共享。

二、源码研究流程

源码研究流程主要分为三个阶段，即开始前，进行中，已结束。

1.开始前

对框架(工具)的了解：如果想要研究某个源码，想必对框架有一个基本的了解，比如 React 框架，至少知道它是一种单页面应用，操作的是虚拟 DOM，setState 方法是异步执行及一些基本的写法，但是如果想要研究源码，这些了解往往是不够的，还需要知道 React 的生命周期，哪些生命周期内做哪些事情以及一些优化的写法，总之这里的了解要深入到仅接近源码的地步。或者说对内部的工作机制有更深入的了解。这将会大大助力第二阶段的源码研究。

扎实的基础：源码之所以为源码，是因为其内部都是一些高阶写法。它会以最简洁、最优化、最全面的方式来实现功能，而不像普通开发者实现功能都是用最基本的写法堆积而成。而且源码具备高度的封装性，有时候一个方法，可以在多种场景下使用，并且需要考虑多种异常情况，所以源码内部会有各种判断和抛错。在研究源码前，一定要提升一下基本功。否则将会寸步难行，这里看不懂，那里也看不懂。最后导致心态崩溃，看不下去，只得半途而废。以 JS 来说，像继承和封装就不用说了，还有构造函数、异步、闭包、递归、apply/call/bind用法、事件模型、原型链这些理论知识一定得熟记于心，熟练运用。

心理建设：源码难懂是一定的，首先要认清这个客观事实。但是凡事一定要敢于尝试、勇于尝试，否则怎么知道自己有多少可能性。万事开头难，在刚开始的时候，也许信心满满，遇到看不懂的代码也一定不要着急，一遍看不懂看两遍三遍四遍，总会慢慢有所顿悟的。

2.进行中

总览：进入了源码研究阶段，也不要刚开始上来就细细的琢磨每行代码，在初期阶段应该对总体源码有一个初步认识，大概了解一下框架结构，每个模块的功能，设计思想等。如果刚开始看不懂也没关系，模块命名都是语义化的，最起码大概知道每个模块的功能。总览了一遍，心里有数就行。

细嚼：到了每个模块的深入研究阶段，一定要细嚼慢咽，弄清楚每个方法的功能，在第一遍细嚼的时候可以不用太关注一些细节，但是函数的主体功能需要掌握。在此阶段根据不同基础所需要花费的时间也不同，有些人基础上，看过两三遍就懂了，有些人基础差也不要太担心，多看、多研究、多问。这个阶段是源码研究最核心的阶段，所以花费的时间也最多。

关联性：如果说源码研究有没有方法或诀窍，就是这个阶段了，寻找函数与函数之间的关联性。也许你会说，直接看调用的地方不就知道了。普通项目代码确实只需要看调用的地方，就能知道函数与函数之间的关联性。但是在源码中，有时候根本看不出函数在哪调用的。这时候除了一步步剖析函数的功能之外，有一个方法就是全局搜索。凡是你能想到有可能关联的关键信息，就开始全局搜索，也许你搜索出来的乍一看上去没有任何关联。但是只要搜到关联点了，就可以以此为据点，再去剖析函数之间的关系，很快，你就会发现会有“拨开云雾见明月”之感。

心理建设：在整个源码的研究过程中，心理建设也非常重要，告诉自己一定要耐心耐心耐心，切忌急功近利，源码研究是个长跑赛，只有耐心地走好每一步，才能抵达终点。

阶段小结：在研究的过程中，也要学会阶段性的总结，可以以小模块或者核心功能为单位小结，整理一下本阶段学习的内容，哪些是已经掌握的，哪些还有待进一步研究。有没有更好的方式方法以供下个阶段参考学习。

3.已结束

自我总结：所有的源码研究完成之后需要做一个最终的总结与复盘。这跟做任何事情是一样的，总结包含对框架更深入的认知，框架的核心思想，以及在框架中具体学到了哪些知识等。

成果输出：最好是能够根据自己的总结输出一篇文章，一来巩固自己的学习，日后想要回顾也有所留存；二来也可以帮助他人(如果是以写博客的形式)；三来被知识面更广的人看到还可以指出不妥之处。