对于 React 这样大型的项目来说，如果不了解其设计思路，直接钻进海量的代码里，最终的结果就是消磨兴趣，从入门到放弃。如何阅读大型前端开源项目的源码一文说得很好，阅读源码应该是问题驱动，带着问题去了解源码，会有的放矢。这篇文章主要讲我是怎样阅读源码的。目的是在阅读源码的时候，可以更高效的定位到自己想要看的代码。
# 了解脉络
先去 google 搜索一下相关的资料，找几篇点赞量比较高，时间比较新的文章看看，大概先了解下 React 的设计思路和核心概念。然后把源码 clone 到本地，通过 readme 了解源码的组织形式，然后通过 demo 和 debug 的形式去理解代码。
# 如何debug
# clone
clone代码，选择16.8.0的版本进行阅读，通过官方文档 Codebase Overview 理解源码结构。
$ git clone git@github.com:facebook/react.git
$ cd react
$ git checkout tags/v16.8.0
2
3
# 创建一个 demo 项目
$ create-react-app play-react-app
# debug
先按照官方文档Codebase Overview 提议的方式，把 react 和 react-dom 打包成 umd 类型的文件 link 到上面创建的 demo 项目中，在关键的函数中加上debugger语句，然后在 React 根目录中运行 yarn build，demo 项目中的 node_modules 就会出现最新的 react 和 react-dom 包，就可以愉快的打断点调试了。源码中有较多的循环，可以多使用写console.log或者console.trace去查看每次循环的变更，这样比较容易理解循环的目的。
调试技巧
- 利用浏览器的开发者工具，在适当的地方打断点
debugger或者console.log，进行追踪 - 全局搜索大法
- 充分利用
console.trace，打印出函数的调用栈，分析函数的调用关系
# 适当记录
React 的源码是公认的难读，一是函数分的很细，二是调用栈很深，往往看着看着就容易迷失方向，不得不重新开始，这个时候就需要适当做下记录，记录下流程，重要的函数，画下流程图，图远比干巴巴的文字形象方便，思路断了也容易追踪，然后把大的问题分解成小的问题逐步去弄清楚，多运行调试几遍。