看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目录能够找到PureComponent，Component，createRef等经常使用的东西，在react-dom中也找到了render方法。

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

总结下看react源码的思路。

1. 从熟悉的看，熟悉的每每也是比较重要的。
2. 没必要跑代码验证，跑代码会打断思路，并且效率比较低。
3. 挑重要的看，好比Component，ReactElement，render方法等，比较新的像hooks就能够先不看。
4. 没必要纠结细节，有些看不懂的地方能够先跳过。

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