看react源码的基本思路

邹立鹏发布于2019-08-23 16:47 / 1661人阅读

摘要：最初打开源码看我是非常迷茫的，不知道该从哪里看起，不知道如何看，后来经过一番折腾终于找到了自己看源码的思路，分享出来供参考。总结下看源码的思路。不必跑代码验证，跑代码会打断思路，而且效率比较低。

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

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

慕课网一个课的电子书，他有个源码解析的视频教程，应该不错，不过我没买。

一个知乎专栏，写得很清晰，只不过是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源码的思路。

从熟悉的看，熟悉的往往也是比较重要的。

不必跑代码验证，跑代码会打断思路，而且效率比较低。

挑重要的看，比如Component，ReactElement，render方法等，比较新的像hooks就可以先不看。

不必纠结细节，有些看不懂的地方可以先跳过。

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

GPU云服务器云服务器数据分析的基本思路基本思路数据分析基本思路 React 源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103287.html

精读《源码学习》

摘要：精读原文介绍了学习源码的两个技巧，并利用实例说明了源码学习过程中可以学到许多周边知识，都让我们受益匪浅。讨论地址是精读源码学习如果你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。 1. 引言 javascript-knowledge-reading-source-code 这篇文章介绍了阅读源码的重要性，精读系列也已有八期源码系列文章，分别是：精读《Immer.js》源...

aboutU 2019-08-26 10:15 评论0 收藏0
一种让小程序支持JSX语法的新思路

摘要：下面我们介绍一种全新的处理思路，这种思路在小程序运行期间和真正的几无区别，不会改变任何代码语义，表达式只会被处理为方法调用，实际运行的时候就是普通对象，最终通过其他方式渲染出小程序视图。最终渲染出小程序视图。 React社区一直在探寻使用React语法开发小程序的方式，其中比较著名的项目有Taro，nanachi。而使用React语法开发小程序的难点主要就是在JSX语法上，JSX本质上...

Riddler 2019-08-23 18:08 评论0 收藏0
记一次“失利后”经过半年准备通过阿里社招的经历与感悟

摘要：写在最前本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。在博客有一定曝光度的积累中，陆续收到了一些面试邀请，基本上是阿里的但是我知道我菜。。写在最前本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后，通过分析自己的定位与实际情况，做出的未来一到两年的规划。以及本次社招...

malakashi 2019-08-26 11:36 评论0 收藏0
剖析 React 源码：先热个身

摘要：我们先来看下这个函数的一些神奇用法对于上述代码，也就是函数来说返回值是。不管你第二个参数的函数返回值是几维嵌套数组，函数都能帮你摊平到一维数组，并且每次遍历后返回的数组中的元素个数代表了同一个节点需要复制几次。这是我的 React 源码解读课的第一篇文章，首先来说说为啥要写这个系列文章：现在工作中基本都用 React 了，由此想了解下内部原理市面上 Vue 的源码解读数不胜数，但是反观...

sean 2019-05-23 17:32 评论0 收藏0
精读《怎么用 React Hooks 造轮子》

摘要：可以看到，这样不仅没有占用组件自己的，也不需要手写回调函数进行处理，这些处理都压缩成了一行。效果通过拿到周期才执行的回调函数。实现等价于的回调仅执行一次时，因此直接把回调函数抛出来即可。 1 引言上周的精读《React Hooks》已经实现了对 React Hooks 的基本认知，也许你也看了 React Hooks 基本实现剖析（就是数组），但理解实现原理就可以用好了吗？学的是...

Shihira 2019-08-26 13:22 评论0 收藏0