看react源码的基本思路

每次都信誓旦旦的给自己立下要好好学习react源码的flag,结果都是因为某个地方卡住了,或是其他原因没看多少就放弃了。这次又给自己立个flag-坚持看完
react源码。为了敦促自己,特开设这样一个专栏来记录自己的学习历程,这意味着这个专栏的文章质量并不高,你可以拿来参考参考,切莫全信,我不想误人子弟,后面要是学有所成再考虑产出些好点的文章。 要是发现文章中有什么不当之处,欢迎批评交流。我看的源码版本是
16.8.2

为了看react源码,我查找了不少资料,这里推荐两个参考资料,个人觉得写得不错。

  1. 慕课网一个课的电子书,他有个源码解析的视频教程,应该不错,不过我没买。
  2. 一个知乎专栏,写得很清晰,只不过是15.6.2的, 在react16里面一些方法找不到了。

最初打开源码看我是非常迷茫的,不知道该从哪里看起,不知道如何看,后来经过一番折腾终于找到了自己看react源码的思路,分享出来供参考。

一般看一个开源项目,我会在package.json中找到main字段,从而找到入口,再顺藤摸瓜去看,但是react的源码的package.json中并没有main字段。所以通过这样找入口的方式行不通。

既然找不到入口那就从熟悉的看,打开packages目录,发现其中有个react目录和react-dom目录是自己比较熟悉的,猜想平时所用的import React from 'react'以及import ReactDOM from 'react-dom'应该就是分别导入的这两个目录下边的东西。初看代码发现确实是这样的,在react目录可以找到PureComponentComponentcreateRef等常用的东西,在react-dom中也找到了render方法。

找到了该看什么接下来是确定如何看,我尝试过去用项目里边配好的单元测试工具jest去跑代码打断点,但是后来发现并没有这种必要,一方面效率不高,另一方面只要分析的没有太大问题都会按预期走,没有必要都验证。所以后面都是直接看代码不去跑代码验证了。

总结下看react源码的思路。

  1. 从熟悉的看,熟悉的往往也是比较重要的。
  2. 不必跑代码验证,跑代码会打断思路,而且效率比较低。
  3. 挑重要的看,比如ComponentReactElementrender方法等,比较新的像hooks就可以先不看。
  4. 不必纠结细节,有些看不懂的地方可以先跳过。

下一篇文章将介绍我对react目录下一些重要代码的理解。

    原文作者:Bigbear
    原文地址: https://segmentfault.com/a/1190000018783864
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞