阅读React16源码有感

2,269 阅读5分钟

自从React的内部实现改为Fiber之后,源码就变得相当晦涩,啃了一个月之后,稍微总结的了一点经验、阅读时的误区、以及为什么很多次看不下的原因,但是我相信,这些经验可以成为我将来阅读源码的过程中最大的武器。我相信阅读源码并从中提炼知识是最好的学习方式。

1. 模块化阅读,不能在某个分支下越走越深,丢失全局观

这一点尤其是对React16而言,因为整个调用栈会非常的深,深到超过你的记忆和理解能力。你需要去先了解React16的设计,用法,然后利用函数名、文件名、模块划分,去理解当前这个函数属于整个流程的那个阶段。 就React而言,从初始话创建ReactElement、ReactRoot、FiberRoot、rootFiber这些过程,再到scheduler各种任务的过程、再到通过fiber进行的reconciler的过程,最后到commit,环环相扣,如果你一开始的阅读是从头看到尾,你可能会晕头转向、然后说这坑爹啊。 这些流程、设计理念往往在官方文档中会涉及、或者上网看一些大牛的文章,先了解整个模块划分、流程是非常有意义的,这个年代了,大把的知识分享没理由不好好利用对吧。

2. 从官方contribution文档中获得帮助

我们生产开发的版本和框架开发者的设计是不一样的,我们用的往往是打包之后的结果,不信你可以试试从React的master分支clone一个仓库下来看看。 contribution文档最大的作用是,框架开发者们告诉你怎么测试、调试、打包这个框架。他们会告诉怎么打包有sourceMap、怎么打包最快、测试哪个功能可以用哪个demo,这无疑会让我省下大量精力去熟悉项目配置、写demo测试等等。甚至会有阅读指导?

3. 如果可以的话,从模块开始突破

这一点在webpack源码中就非常的明显了,webpack的plugin机制基于Tapable, 而Tapable整个模块都是基于事件的,如果你不了解Tapable,你只会发现webpack的源码在莫名其妙的跳转。 当你从React中找到独立的模块时,别想了,猛攻就是。

4. 自己给自己提问

有时候,我们会在阅读的过程之中丢失阅读的意义,为了阅读而阅读,不仅消磨耐心和斗志,也会让你毫无收获。 提问题有几种方式

  1. 阅读之前给自己提个问题,然后根据这个问题去调试、阅读。或者可以在网上搜相关的面试题、然后在源码中自己找到答案。
  2. 阅读的时候要多问自己,为什么作者会这样写,举个例子,尝试从性能角度考虑,因为作为框架、很多细微的性能优化都会考虑
5. 做好长期战斗的过程,因为会遇到很多不熟悉的知识

因为框架开发和应用层开发不一样,这会让你遇到很多不熟悉的领域,需要你去另外研究,再回来一遍。 在React中看到的位运算、链表操作在前端常规开发中都比较少遇到,如果你发现了你是因为不熟悉某些知识而看不懂,那么恭喜你了,你发现自己的知识盲区了,赶紧去补一补。

6. 不要依赖全局搜索

我一向喜欢研究提升开发效率的工具,webstorm的各种功能当然也用得溜,但是对于一个新项目,太过依赖全局搜索,往往会丢失对模块的认识,有时候手动找找文件,多看看目录名和文件名、熟悉一下函数位置,都能提高你对项目的熟悉度。

7. 学会猜测

如果让我总结,我会觉得阅读源码就是一个猜测与验证的过程。 我们可以从变量名、模块名中猜测这个模块/函数的功能。猜是非常重要的,带着我们预测的思路去看代码,哪怕是错的思路,这也可以集中自己的注意力,然后在发现错误的时候更深刻的理解。

8. 你要非常熟悉这个库

这一点可能老生常谈了。但的确非常重要。 如果是一个比较小型的库,你大可以先写个demo,了解功能,然后开始阅读源码,顺便利用demo断点调试一下。但是对于稍大一点的库,我建议还是先从api、设计理念、这个库想解决的问题这几点入手。而且要熟读官方文档。 当然,与其主动熟悉某个仓库,还不如直接从平时生产中常用的工具库中选一个来阅读,既能提高生产和debug的效率,又能提高知识的深度,何乐而不为。

9. 仓库与代码注释、流程图

当准备阅读源码就是一场持久战,在阅读的过程中,可能会有大量重复或者不理解的地方,如果不理解大可以标记个TODO避免死磕细节。每次看懂的地方也需要注释,因为很有可能看到后面忘了前面,注释不怕啰嗦,就怕不写。 我的建议是从框架github fork一份,注释也可以推送自己的fork仓库。 此外,当某个模块看完,或者看得累,建议及时输出一份流程图,既可以用于帮助理解,也可以用于将来复习。

10. 写文章输出

这一点可能不止是在阅读源码中需要用到,在任何技术知识的学习,输出文章用于是最好的学习方法,当你试图讲清一个知识,你会发现自己对知识的漏洞,并且组织文章过程可以系统规划整理整个知识脉络。而且可以加强印象便于将来复习,看自己文章复习会比上网查一篇来回顾效率高得非常多。 很多知识是需要回顾复习的,你可以想想你刚毕业的时候学的理论知识,现在还能否了然于胸?