代码以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 。 写在前面不知道各位读者学习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

前两天看到ByteFE公众号发了篇文章，从源码去讲webpack。我之前也从很多方面去学习webpack，只是源码一直没太看得进去，这一次我想仔细地读一读。 简要介绍tapable说实话，之前看webpack源码一直没看的太懂，看不进去，有一部分原因就是它的hooks我根本看不懂是在干什么。比如这样，一堆hooks，还有全是回调函数，看不进去 123456789101112131415con

最近在补js基础。当初自学js的时候，总是感觉学的不扎实。只能说不去上手，再怎么死读书，也理解不了。积累了经验，然后自己去思考，这个时候再去看理论，就容易理解了。 感觉工作一年以来，确实学到了很多，但是过于专注于应用方面的知识，反倒基础上有些东西忘记了。虽说平时写代码多半没什么影响，但是基础扎实，才能让你知其所以然。搞技术的永远不能放弃对“知其所以然”的追求。 本篇文章小目标是当一个自己的笔记，