因为工作的需要,开始使用react(之前一直用的vue)。但是对于react的实现一直不是特别清楚,刚开始使用时,时不时就出现循环更新的问题。所以想更加了解react的原理。
虽然上网随便一找,就能找到大量React的源码解析。但是我觉得,自己花时间来阅读源码,不仅是能了解React的原理,也是掌握一种更加主动的学习方式。之前虽然尝试看过一些vue的源码,但是最终都没有坚持下来。
作为一个阅读源码的新手,我能想到的阅读方式,是使用React的源码进行调试学习。通过进行文章记录,来促使自己坚持下去。
搭建源码调试环境
通过调试源码,我认为可以更直观的了解运营的过程。刚开始阅读源码时,可以比较容易的找到头绪。
调试环境的搭建可以参考这篇文章React17源码解析(开篇) —— 搭建 react 源码调试环境。
源码目录
开始看代码前,我觉得先从源码的目录看起是很有必要的。通过目录可以更加快速的理解代码层次结构,找到开始阅读的着力点。
源码下主要有三个目录:fixtures、packages、scripts
fixtures:测试代码
packages:主要源码
scripts:打包、编译相关的代码
我们主要看packages中的代码,其目录结构如下:
其中比较重点的有react、react-dom、react-reconciler、scheduler几个包。
react:包含了createElement、hooks、context、memo等核心内容
react-dom:主要包含了浏览器下的渲染,ReactDOM.render就在这里面
react-reconciler、scheduler:分别是fiber的render和调度相关的内容
tbc
下一篇,我会先从react目录下的内容开始看起,一点点学习react的源码
写这些内容只是为了留档记录,督促自己学习。加油!