React 之深入理解系列

55 阅读2分钟

前沿

从事React开发多年决定花些时间将自己对于React理解记录下来,希望能给一些试图去理解它的小伙伴提供一些帮助。这一系列的文章对于初入React的小伙伴可能会不太友好,我想说的是学习一样新事物大脑都是从一片空白开始的,随着不同的概念、术语、理解在大脑中的建立堆叠,原来怎么也看不懂的东西看懂了,原来怎么理解不了的东西理解了,只要你保持一颗好奇且不屈的心。

此系列文章是为了给正在生啃React源码或者即将去啃源码的小伙伴打辅助,希望能够帮助你们早日通关。系列写作的的思路是从全局到局部,先是全局鸟瞰,建立整体理解,后局部特写。

重要提醒:此系列的文章背景是React19 Beta版刚刚发布不久,所以此后的所有文章也都是基于此版本之上。

目标效果

  1. 能够对React整体执行过程有一定的理解。
  2. 理解React中术语、概念(time slice、entangle、transition、ping、suspend等),搞清楚这些东西是理解React的基础。

解锁系列

  1. Eventloop中的Task,Microtask的调度
  2. React中的Task的任务调度之scheduler;
  3. React中的Task(render + commit);
  4. React的中断恢复机制;
  5. React中更新(Update)优先级(Lane);
  6. React中更新(Update)批量更新和离散更新;
  7. React中的Suspend执行机制;
  8. useState篇;
  9. useOptimistic篇;
  10. useTransition篇
  11. useOptimistic篇;
  12. useDeferredValue篇;
  13. use篇;
  14. useEffect+useLayoutEffect篇;

此篇为开局篇,每解锁一个会点亮一个,具体写作内容后续可能会有调整,每篇文章都是你中有我我中有你。