通俗易懂的React原理（十一）：从createRoot说起
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 前面我们一直在讲React渲染的流程，但是我们并不是从我们最初的调用开始讲的。回顾前面的十篇文章，我们是先讲了React渲染的流程，先跳过了触发渲染这一步。然后讲了一个setState或者说是dispatch的行
通俗易懂的React原理（十）：Scheduler调度器
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 所谓调度，就是有一个任务，不一定会立刻执行，而是安排在某个时机再去执行。 前面几篇也多次提到过了，React会通过调度器来执行一些任务。例如并发渲染被中断后的恢复执行，useEffect部分场景下的执行，都是由S
通俗易懂的React原理（九）：commit流程（下）
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 1234567function commitRoot(){ // 前略 flushMutationEffects(); flushLayoutEffects(); // Skip
通俗易懂的React原理（八）：commit流程（上）
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 前面我们基本讲完了render阶段，也就是React生成新的fiber tree的过程。后面我们就该看commit阶段了，这是根据新的Fiber tree去修改真实dom的过程。 我们之前说的可中断，也仅仅是针对
通俗易懂的React原理（七）：一次状态更新如何触发渲染
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 在本系列第二篇文章中，我们介绍了React是如何在一次渲染中，构建Fiber tree的。只不过我们当时是直接从workLoopConcurrentByScheduler/workLoopConcurrent/workLoopSync开始讲的，
通俗易懂的React原理（六）：completeWork流程
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 completeWork在前面我们讲构建Fiber tree的时候，我们知道每个节点都需要先经过beginWork方法正向遍历。然后等从子节点反向遍历，回到当前节点的时候，会调用completeWork方法。 beg
通俗易懂的React原理（番外篇之一）：学习React源码有什么用
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 。 写在前面不知道各位读者学习React源码是为了什么。我学习React的源码，有一部分是好奇，因为我不想把总打交道的东西当成一个黑盒。了解它的实现，不仅可以在用的时候更少踩坑，还可以知其所以然。还有一部分原因就是，我相信日常的学习积累，总有一天会派上用场。机会总
通俗易懂的React原理（五）：子节点的diff算法
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 。下文中展示的代码可能省略了部分不影响主题逻辑的代码，例如dev环境下才执行的代码、水合时执行的代码 本篇我们继续来看beginWork里面的部分，依旧是以函数组件为例。 reconcileChildren看完了执行组件自身的部分，我们接下来要看reconcile