React源码学习——下决心开始

157 阅读2分钟

因为工作的需要,开始使用react(之前一直用的vue)。但是对于react的实现一直不是特别清楚,刚开始使用时,时不时就出现循环更新的问题。所以想更加了解react的原理。

虽然上网随便一找,就能找到大量React的源码解析。但是我觉得,自己花时间来阅读源码,不仅是能了解React的原理,也是掌握一种更加主动的学习方式。之前虽然尝试看过一些vue的源码,但是最终都没有坚持下来。

作为一个阅读源码的新手,我能想到的阅读方式,是使用React的源码进行调试学习。通过进行文章记录,来促使自己坚持下去。

搭建源码调试环境

通过调试源码,我认为可以更直观的了解运营的过程。刚开始阅读源码时,可以比较容易的找到头绪。

调试环境的搭建可以参考这篇文章React17源码解析(开篇) —— 搭建 react 源码调试环境

源码目录

开始看代码前,我觉得先从源码的目录看起是很有必要的。通过目录可以更加快速的理解代码层次结构,找到开始阅读的着力点。

源码下主要有三个目录:fixtures、packages、scripts

fixtures:测试代码

packages:主要源码

scripts:打包、编译相关的代码

我们主要看packages中的代码,其目录结构如下:

截屏20220128 下午93029png

其中比较重点的有react、react-dom、react-reconciler、scheduler几个包。

react:包含了createElement、hooks、context、memo等核心内容

react-dom:主要包含了浏览器下的渲染,ReactDOM.render就在这里面

react-reconciler、scheduler:分别是fiber的render和调度相关的内容

tbc

下一篇,我会先从react目录下的内容开始看起,一点点学习react的源码

写这些内容只是为了留档记录,督促自己学习。加油!