代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 。此版本React的RSC功能近期被发现有致命漏洞，我们研究源码不涉及相关功能，但此版本应该严禁在生产使用。 这一篇写得随意一点，不打算贴太多源码。与其说是技术文章，更像是一个排坑故事，记录我为了查清这个 bug 花了整整两天时间，最后终于定位的过程。 没想到吧

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 React自己实现的事件系统如果我们用原生的js，去给dom添加事件，应该用addEventListener，或者添加onclick之类的属性。但是这两种方法，都和我们React的写法不同。 React里，我们想

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 。 最近又在工作中遇到了一个比较怪的问题，排查的时候也是用到了前面学习React源码的知识。今天再写一篇番外来记录一下。 问题介绍背景是，在一个商品列表里，有很多折叠状态的商品卡片。当我点击商品卡片的时候，会调接口获取商品详情，和推荐的低价商品。接口返回后，卡片状

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 前面我们一直在讲React渲染的流程，但是我们并不是从我们最初的调用开始讲的。回顾前面的十篇文章，我们是先讲了React渲染的流程，先跳过了触发渲染这一步。然后讲了一个setState或者说是dispatch的行

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 所谓调度，就是有一个任务，不一定会立刻执行，而是安排在某个时机再去执行。 前面几篇也多次提到过了，React会通过调度器来执行一些任务。例如并发渲染被中断后的恢复执行，useEffect部分场景下的执行，都是由S

代码以React v19.1.0为例，https://github.com/facebook/react/tree/v19.1.0 ，并且经过简化，仅保留了关键的逻辑，以便于理解流程 1234567function commitRoot(){ // 前略 flushMutationEffects(); flushLayoutEffects(); // Skip

代码以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的源码，有一部分是好奇，因为我不想把总打交道的东西当成一个黑盒。了解它的实现，不仅可以在用的时候更少踩坑，还可以知其所以然。还有一部分原因就是，我相信日常的学习积累，总有一天会派上用场。机会总