React源码解析系列

417 阅读2分钟

一、前言

在工作中一直使用react,对各种常用的api有了一定程度的理解,也在各平台上看过诸位大佬的对react和react的api的解析,但无论是自己使用还是通过大佬的文章进行的了解,愚笨的我还是难以建立一个自己对react的认识体系。所以,我决定亲自对react源码进行一番调试,达到react何时会执行到何处,且都大概做了些什么的理解程度。

在此,我会带着各位读者,从浅至深的理解react的主体思路。

整个系列章节较多,大体上我将它分成了首次挂载和更新时两个大阶段进行解析,每篇文章的最后会附上react源码调试的仓库以及一个当篇文章所需的简化版react供各位进行调试,巩固与加深对react的理解。

ps:本系列调试的react源码的版本为18.2

目录

  1. beginWork
  2. 首次挂载时的completeWork
  3. commitRoot
  4. 事件系统
  5. useReducer
  6. dom-diff
  7. useEffect
  8. context
  9. schedule优先级
  10. lane优先级

最后

整个系列共10篇,或许有的读者会疑惑常用的api远不止useReducer、useState和context相关的,还有useCallback,、useMemo、useRef等。

在此就要说说看完本系列各位读者都会收获到什么。

  • 熟悉整个react初次挂载和更新流程。
  • 较熟练的调试技能,可以轻松调试react源码。
  • 清楚react大概在何时与何地调用目标api,并且能通过自己写demo调试出来想要了解的api。

所以,对于本系列未讲到的api,都会交由读者自行调试去理解,掌握了渔的方法,总归亲自钓一钓鱼才有乐趣。