高效读源码
如何高效阅读开源项目的源码¶
统计信息：字数 6473 阅读13分钟
解答一¶
0、了解项目的技术背景¶
我默认你是知道你要看的开源项目是干嘛的，比如 RocketMQ 是消息队列，消息队列是干嘛的你应该先知道。我也默认你用过这个开源项目，业务上没用过自己私下也要先用用，了解简单功能怎么用，让它先跑起来。如果是内部的项目，直接看项目文档。了解项目使用的框架和主要技术。
1、看名词概念¶
了解具体涉及到的概念、名称、特性、架构这是第一步。这一步能让你脑子里有个角色分布图和数据流转图，让你明白整体项目的主要角色及之间的交互。
2、看源码目录¶
你得先知道每个目录是干嘛的涉及哪些功能，这其实和你看业务源码一样。
3、找突破口¶
这种开源项目都有 demo ，打断点就完事儿了！（找到入口文件或者主函数）
知晓大体会涉及到的角色和数据流转之下读源码，
你会对一些方法调用有一种“认可感”，因为你知晓大致的流程，所以觉得本该如此。
4、理清核心流程¶
先拷贝一份，然后把一些异常处理和不常见的分支先删了。
并且理清楚了一个流程之后开始画图，流程图、脑图都上。
清楚之后再看没删减的代码，把异常处理的一些也理解了，补充完整流程图、脑图等。
看看我之前分析 Kafka 的时候画的图，就类似这样的搞清楚一个流程：
先略过一些不能理解的细节，主流程先搞懂。
5、理解细节¶
所以在理清整体流程之后不要错过细节。往往你觉得很奇怪的地方可能就是一些“骚操作”，学的就是“骚操作”。
为了找bug而读源码¶
这个目的性很强，有时候是项目出错，一般而言有日志，所以通过日志搜就行。
如果你本身对这个框架很熟悉那当然最好，如果不熟悉通过日志搜索结合上下文其实也能找到一些缘由。
不过有时候还是得整个链路分析下来才能排查问题，这个看功力了。
有时候是因为看到一些文章的说法冲突了，一篇说 A 另一篇说 B 。
如果你找不到权威的信息你只能自己去看源码，通过关键字搜。
解答二¶
高效读代码的核心不在于读，而在于动手。
IT行业是最典型的工科行业，要的不是多么高深的理论基础，而是不断动手实战，很多问题只看不做，等于没看。要想高效理解，深度理解，必须在看代码的同时配合动手练习。
其实在读代码的同时，做好以下七个步骤即可：
1、弄清楚这个项目的作用和主要用到的技术及框架
2、部署项目，并设置debug模式
3、先从前端每个主要功能都走一遍
4、每个action的方法打断点，action中因为有断点，比如java后端代码，acting、service、DAO都走一遍
5、用visio或艺图把类结构图和代码流程图画出来（问下自己，有没有可以参考的visio文档？）
6、尝试修改一些代码逻辑，让项目继续跑起来，看看能发生什么奇妙的事情
7、抽离主干代码，重建工程，再重新填充逻辑代码，尝试是否能让项目跑起来且功能基本一致
这七个步骤反复做，不光能吃透目，也可以拿来学习各种开源项目。
案例链接¶
下面是两个源码解析：VUE+REACT
https://github.com/answershuto/learnVue
https://github.com/7kms/react-illustration-series
实际案例¶
以 table 项目为例
0、技术背景
- 产品介绍：这是一个轻量级的在线表格+数据库，以表格、列表、统计等多种形式展现数据。本质上是管理数据，展示数据的项目。
- 前端框架是 react
- 组件库是 reactstrap + ant-design mobile
- 没有状态管理工具（react-redux）
- 开发工具是 webpack + babel
- 样式是 css + 少量 less
- 其他的第三方库有 moment dayjs calendar g2 lodash deep-copy is-hotkey conva image-lightbox 等
1、名词概念（model）
- 这个阶段只是定性了解核心名词，不涉及全部的属性
- base 一个表格，这是操作的基本单位
- folder 一个文件夹，内部包含若干表格
- table 一个子表，类似 Excel 中一个 sheet 界面显示成一页表格
- row 表格中的一行
- column 表格中的一列
- cell 表格中的一个单元格
2、看源码目录
可以使用 tree 命令，查看 src 下面的目录
3、找突破口
找到 index.js app.js 入口文件 查看主要的依赖，如果项目很大，可以写成树形结构图
4、理清核心流程
react 是典型的状态驱动，那么只要把数据（状态）的传参理清，就理清了项目的核心流程
可以把项目跑起来，然后在浏览器控制台，查看 react 组件的层级（实际上可能有20层），核心流程可能有很多
- 表格数据流：app - table - table main - reactDataGrid- Grid - canvas - row - cell 渲染如何实现，保存如何实现
- 表单数据流：formConfig - header + main + footer , header = title + background + describe, main = columns 提交表单
- 统计数据流：data - label - axix （统计只做展示，单项数据流）展示方式为饼图，折线图，柱状图，气泡图等
- 数据存储：UI 层通过 API 调用 action，改变 store 中的数据，然后触发全局或者部分 state 更新，更新页面。用户的每个操作使用 action 队列实现，这样可以实现多人协同和 undo+redo 操作。
5、其他细节
- Column 的属性配置
- 过滤筛选分组的逻辑，动画实现
- 长文本渲染和数据转换（普通视图和归档视图）
- 数据处理的实现
- 通知规则和自定义规则的前端实现
6、更改删除一部分代码，看项目是否正常运行（例如删除统计部分，或者更改统计的配置）