携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 2 天，点击查看活动详情
因为项目需要和面试需求，越来越多的小伙伴想要通过源码来提升自己，因此，我经常会带大家手写一些源码，比如React、Redux、React-Redux、React-Router、Form、Formily等等，写的多了，经常会有小伙伴问我是怎么学习源码的。授人以鱼不如授人以渔，接下来，我来分享下我是如何从熟读源码，再到手写实现的。
1. 找文档
我们要学习一套源码之前，首先要先了解它是干嘛的，这个时候很多人的第一反应是先上掘金、语雀、知乎等找文档。
先找文档当然是没错的，但是技术网站的文章，水平参差不齐，甚至很多赞与评论很高的文章都有不少错处或者对应版本早已过期。因此为了效率与准确度考虑，这里推荐一下学习顺序，先看官方最新文档。
注意官方和最新这两个要求，前者不用多解释，一般官方文档更全面更丰富，维护度也更高。重点说下后者，源码版本号很重要，不少源码随着版本迭代，发生了破坏性改动，不同版本对应的文档也不同，比如react-router5与react-router6，因此看文档的时候，一定检查下你看的文档版本号和你要学习使用的源码是否一致。
关于文档版本号，一般可以在路由地址上或者官网首页上看到，之后再去看下github源码对应的版本号，确保两者一致。
如果找不到官方文档，可以先去github源码看一下，README里通常是一份简单的文档，有些还是中英文都有的:
这个时候如果有官方文档，README里会有链接指引。如果没有的话，可以查看下源码里是否有一个叫docs的文件夹：
一般成熟的源码里都会有这个文件夹，里面就是文档。甚至有些源码下的docs比官方文档都全面。
最后，现在很多源码项目都是基于monorepo开发的，很多packages下的文件也都是独立的，看文档的时候，建议不要放过docs与README。
2. 看示例代码与单元测试
经历了文档阶段之后，再根据文档写一些demo，相信大家对于这套源码已经掌握了至少六七分了，那么接下来想要在某一个难点上继续学习的话，可以看看别人的逻辑，比如示例代码和单元测试。
示例代码通常在examples文件夹下，这个里可以比较下官方实现与自己实现：
单元测试是验证源码逻辑的代码，如果你对某个API用法不确定准确逻辑，可以去看看单元测试代码或者调试下试试：
3. vscode工具安装
经历前两步之后，终于要下载源码来看看了，但是一般源码的代码量比较大，没法一次看完，所以我们可以借助一些工具来辅助阅读，vscode上建议安装Bookmarks、Better Comments、Git Blame等。
Bookmarks可以打一些书签，方便记忆，下次可以快速找到某个函数或值。
Better Comments可以做些颜色笔记，看起来比较醒目。
Git Blame则可以帮助查看源码的提交记录，注意得是远程拉取下来的代码，直接下载的不可以查看：
4. 源码阅读
终于可以下载源码看了，刚刚也提到源码非常庞大，比如V8源码单是文件就两个多G，那么多文件，我们是没法一下子看完的。所以接下来要按照顺序看、挑选自己的重点看。
首先，我们要先区分下不同的文件夹下放的都是什么，并不是每个都要去看的，比如React源码下有接近40个文件，很多人一看不就知道从哪里下手了，
其实这么多文件，平时我们要看的也就四五个核心文件，如果你不知道看什么，先看文件夹命名，命名和框架名称一致的或者叫core、model的基本都是核心文件。实在不行，就文件下直接搜。比如我想看createForm的实现逻辑，但是不知道代码在哪儿：
排序md的文档和test的测试文件，很容易就能找到了。
5. 手写实现
如果你发现读源码的过程中发现自己困了，很正常，如果你发现读过之后，好像没读过一样，也很正常。
接下来验证你真的学会了源码的一个重要方式就是手写了，读过fiber，很懂？那写一个吧，写不出来就是不会~
其实手写我通常是一步步实现，比如先写个最简单的demo，然后把api全部换掉，换成自己手写的，然后再挨个实现，一边看源码，一边整理思路，直到呈现和源码一样的实现。
写完之后，我会再给别人讲解，或者写文章总结，然后回答别人的疑问，反反复复，就熟练于心了。
6. github issues
如果你发现看文档和源码的过程中，有很多困惑，甚至遇到一些bug，可以去issues看看，看看大家的发言，也许就能找到答案。
7. 加社区群，关注核心维护者
这个就不用多说了，相信大家都加了不少学习群了，建议尽量去大佬多的地方，比如大佬亲自拉的群，这个时候消息更多一些。
最后，相信大家都可以完成从源码的阅读到实现了~
