通俗易懂的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
通俗易懂的React原理（四）：浅谈useEffect
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 上一篇我们深入了解了React的hooks的原理，包括它是以什么样的形式被React记录的，怎么样被执行的，并且还以useReducer/useState为例，学习了我们最常用到的一个hooks的执行逻辑，并且。 那么今天我们再来看看我们另一个也非常常用的hook
通俗易懂的React原理（三）：函数组件和hooks原理
代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 上一篇我们讲了React构建fiber树的整体流程，即循环调用performUnitOfWork，里面穿插着beginWork和completeWork的调用，并且最后给出了简洁的伪代码实现。 那么这一篇呢，我们先看一下beginWork前半部分的逻辑。因为be