代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 前面我们基本讲完了render阶段，也就是React生成新的fiber tree的过程。后面我们就该看commit阶段了，这是根据新的Fiber tree去修改真实dom的过程。 我们之前说的可中断，也仅仅是针对

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 在本系列第二篇文章中，我们介绍了React是如何在一次渲染中，构建Fiber tree的。只不过我们当时是直接从workLoopConcurrentByScheduler/workLoopConcurrent/workLoopSync开始讲的，

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 completeWork在前面我们讲构建Fiber tree的时候，我们知道每个节点都需要先经过beginWork方法正向遍历。然后等从子节点反向遍历，回到当前节点的时候，会调用completeWork方法。 beg

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 。 写在前面不知道各位读者学习React源码是为了什么。我学习React的源码，有一部分是好奇，因为我不想把总打交道的东西当成一个黑盒。了解它的实现，不仅可以在用的时候更少踩坑，还可以知其所以然。还有一部分原因就是，我相信日常的学习积累，总有一天会派上用场。机会总

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 。下文中展示的代码可能省略了部分不影响主题逻辑的代码，例如dev环境下才执行的代码、水合时执行的代码 本篇我们继续来看beginWork里面的部分，依旧是以函数组件为例。 reconcileChildren看完了执行组件自身的部分，我们接下来要看reconcile

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 上一篇我们讲了React构建fiber树的整体流程，即循环调用performUnitOfWork，里面穿插着beginWork和completeWork的调用，并且最后给出了简洁的伪代码实现。 那么这一篇呢，我们先看一下beginWork前半部分的逻辑。因为be

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 今天开始我们开始研究React的源码。我们先关注构建Fiber tree相关的内容。 这篇要涉及到beginWork和completeWork的过程，我认为其他的教程此处讲的都比较简略，重点放在了两个方法的内部，而不是两个方法是怎么被调用的。大多数教程说，begi

开个小坑，记录自己学习React源码过程中的一些心得。感觉市面上讲解React源码的书籍、视频都讲的一般，颇有照本宣科的意思。我希望能用通俗的话，把自己对React的理解记录下来。一方面是自己遗忘了之后，能回来看看，另一方面也是希望帮助到其他希望了解React源码，却又摸不着门道的人 第一篇我们首先来讲一讲Fiber架构。所谓Fiber架构，是React16开始的新架构。说到虚拟DOM，相信大

仓库链接：本篇代码 运行方法参考readme，请使用pnpm，因为本次使用的rspack尚未推出1.0版本，预计后续可能会有很多breakchange，所以lock文件至关重要，而我只上传了pnpm的lock，非常抱歉。 环境：node 20.12.0 pnpm 8.15.5 其余依赖以lock文件为准 上一篇，我们已经完成了服务端的部分。理论上，我们这期只要补完浏览器端水合的功能，就基本完

关于ssr相关的介绍，可以移步之前的一篇博文，本文不再赘述 日常工作中，我们可能都接触过ssr，不过我们可能通常是借助于框架（例如Next.js）的支持来完成ssr。今天我想尝试，摆脱高度封装的前端框架，只依赖react相关的库，来实现ssr。 本篇代码 pnpm i安装依赖，npm run server启动服务 环境：node 20.12.0 react和react-dom版本均为18.3.1