全职学习三年React源码是什么体验

细数起来，我学习React源码已经超过三年了，平常工作的大部分内容就是读和写React和React周边库源码，然后做成课程，接下来和大家分享下这三年的感受和收获。

契机

契机很简单，三年前我找了一个讲师的工作，当然并不是因为热爱和追寻梦想，而是因为一个在某教育机构工作的初中同学和我说“程序员讲师赚的很多，做得好的话，一年XX万没问题”，然后我面试讲师职位通过了，就入职了。

入职前，我还想着做大做强，但是入职之后的一周，我的目标就是保住工作，一个月之后，因为工作强度和自身的不足，我随时有被裁掉的心理准备。

为什么讲React源码

在担任React讲师之前，我已经工作五年了，做过很多很多项目，从最早的C#，到jQuery，到React和React Native，再到Vue，并且自认只要需求合理，没有做不出来的，无非是熟悉的做的快点，不熟悉的多花点时间调研(百度)。做讲师的话，把这些教给学员就行了。

但是现实很骨感，我做了个简单的商城项目，做之前打算作为课程项目的，但是做完之后，发现这可怎么讲，课程是直播，我要是一行行敲代码还要讲解，两个小时的时间也就只能做两个简单的页面，还全是一些API的调用，根本没时间讲原理，这样导致的结果肯定就是没基础的学不会，有基础的会吐槽太简单。

最后，我还是回到了原本的课程大纲，系统讲解，不求精细，不写css，页面可以丑一点，把时间花在逻辑讲解上。

我准备了很长时间，第一节课讲的Context和Form，很正式，结果看了眼评论区，没有一个人说讲的好坏，反而都是说“老师声音真好听”。。。

如何入门React源码

其实之前做开发工作的时候，我也会断断续续的看一些原理源码，自己觉得掌握的还可以，但是真的到了去做课程，发现“还可以”就是不及格，“还可以“就意味着好多说不明白，讲课的话，这可远远不行，毕竟课程大纲里都是手写各种库的源码。

于是，每次上课前我都会花很长时间去精细研究每个库，从最简单的AntD3 Form，到Redux、React-Redux、Redux中间件、React-Router等，虽然这些以前都用过，我以前觉得自己掌握的还挺好的，但是做课程就是把这些源码库在直播上写一遍出来。。。

直播最大的难度就是时间的放大性，平常写代码出个bug花了五分钟解决，会觉得很快。但是直播的时候，被几百人围观，一分钟解决一个bug都显得很慢很慢。

最难的还是React源码，因为太庞大了，刚开始看的时候有点像刘姥姥进大观园，我深深地怀疑自己根本不会React。

不过万事开头难嘛，水滴石穿，梳理完知识图谱之后，再看React源码系列，就越来越觉得简单了。

学React源码有用吗

有用。

面试的用处就不用多说了，你肯定遇到过刨根问底的面试官，一个问题能问俩小时，但是如果你能手写的话，那面试的时候再讲原理简直是手到擒来。

还有就是项目中的用处，其实我在梳理React和周边库源码的时候，也发现了我以前写项目时候的一些不足，比如我以前乱用Router5的Route的children、render、component，因为分不清，也懒得分，反正用谁代码都能跑。看了源码之后发现，这三个属性真的不要乱用，完全不一样，而且中文网文档对于这块的翻译有错误，离谱~

还有MobX5的中文网文档，之前也有翻译不太恰当的地方，具体忘了是什么，还记得我提了一个pr。

说回React本身，认真去看源码的时候，发现设计的还挺好，尤其是任务调度，虽然这个模块的代码更新很少，但是看了之后，我发现以前大学时候学的《操作系统》和《算法与数据结构》的课程，忽然有用了，忽然感受到了学以致用的欣喜。

说到这儿，回顾一下大学时候的《操作系统》课，杜老师讲的，是个很温柔的女老师，但是这个课给我的感觉就是我经常怀疑我学它干嘛，当年还是太年轻。

React源码系列唤醒的不只是我以前的《操作系统》课，还有《算法与数据结构》、《C语言》等，还有我不记得是否学过的《编译原理》。大学对我来说是个奇怪的地方，好像学了很多东西，但是工作的时候发现好像都没用上，毕竟我毕业之后做的是前端，而大学不教前端，前端还是我实习的时候自学的。但是后来发现，大学时候学的课都是我现在的基本功。比如我讲Hooks存储的单向链表结构的时候，很多不是计算机专业的学员会问“什么是链表”。

虽然已经毕业很多年，但是我还是很清楚地记得C语言老师讲指针的那节课，清楚到记得那天老师的发型和衣服，梳着低的长马尾，戴着眼镜，穿着阔腿牛仔裤，裤子上有个史努比，她在黑板上画着指针指向图，说“你们刚开始学指针，可能听不懂，但是还是要听呀”。我当时很迷茫，但是很听话地在认真听讲。

现在学以致用了，感觉挺好，以前的辛苦没白费。

学React源码的总结

学React源码之前，我觉得我学的是React，但是学过之后，发现框架只是表象，我真的在学的是表象下的本质。

昨天晚上工作完之后，我去看一个轻喜剧打发时间，因为剧情比较傻白甜，看剧的时候感觉脑细胞无处可用，于是一边看剧，一边看前几天买的新书《程序员的自我修养》，书的前面讲了操作系统的迭代，这简直不能说和React的迭代相关，只能说一模一样。。。

比如，你来读下《不要让CPU打盹》这一节，

“在计算机发展早期，CPU资源十分昂贵，如果一个CPU只能运行一个程序，那么当程序读写磁盘时，CPU就空闲下来了，这在当时简直就是暴殄天物。”

“对于多道程序来说，程序之间不分轻重缓急，如果有些程序急需使用CPU来完成一些任务（比如用户交互任务），那么很可能很长时间才有机会分配到CPU。这对于有些响应时间要求高的程序来说是很致命的，想象一下你在Windows上面点击鼠标10分钟之后系统才有反应，那该是多么沮丧的事。”

“经过稍微改进，程序运行模式变成了一种协作的模式，即每个程序运行了一段时间以后都主动让出CPU给其他程序，使得一段时间内每个程序都有机会运行一小段时间。”

这不就是React从Stack Reconciler到Fiber Reconciler的迭代嘛~

最后

当然，这三年我也不是只在学React系列，太单一了容易故步自封，同时也去讲了React Native的课，还有各种前端场景下的算法与数据结构，还做了一个低代码项目，好像这三年也挺忙。不过开发做久了，看什么都一样，不再是以前刚做前端的时候，看到什么都“哇”一声。

最后的最后，羊了羊为到底怎么玩，谁能出个攻略？