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

·  阅读 12566
全职学习三年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的课,还有各种前端场景下的算法与数据结构,还做了一个低代码项目,好像这三年也挺忙。不过开发做久了,看什么都一样,不再是以前刚做前端的时候,看到什么都“哇”一声。

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

图片

\

分类:
前端
收藏成功!
已添加到「」, 点击更改