React18.2x 源码解析

react diff算法是react框架的核心算法，它最大的作用就是在应用更新的时候，找出新旧虚拟节点树的差异，最大程度的复用旧的节点信息，来减少真实的dom渲染，以此来提高框架的性能。 根据reac

前面两个章节我们已经了解过普通函数组件的更新流程以及React.memo方法优化函数组件的原理。 本节就从实践方面来讲解React.memo方法与性能优化hook的搭配使用。 1，原理回顾 首先回顾一

在上一章节，我们讲解了普通函数组件更新的基本流程，也知道了一个组件修改状态触发的更新，它的子组件也跟着重新渲染的原因。 所以本节就将从React.memo方法来解析函数组件的性能优化处理。 1，案例准

最近在看react应用更新时的一些逻辑处理，因为之前的fiber reconciler协调流程重点学习的是FiberTree的创建过程，对整个更新流程没有进行深入的了解。本次在学习应用更新时也对函数组

在react中，useState与useReducer都是我们在函数组件中定义状态变量的hook，它们的用法和原理都非常类似，所以我们经常会将它们放在一起比较，从本质上来讲：useState就是内置了

之所以会讨论这个话题，是因为最近在看react源码的时候，对组件更新时beginWork工作中的props校验还有一定的疑问，然后就开始查看组件Fiber节点上pendingProps的生成，然后一直

本章节将讲解两个关于性能优化的hook：useCallback与useMemo。 本节主要是介绍这两个hook的实现原理，关于函数组件更新优化的具体逻辑会在后面新的章节介绍。 1，useCallbac

1，Component 我们在刚开始学习React时，第一个接触的就是class类组件的学习，通过继承React.Component创建类组件： 下面我们就进入react源码【v18.2】，学习Com

使用过Vue框架的都会对ref非常熟悉，我们经常会使用它来引用一些组件实例或者DOM实例，而且在vue中使用起来也非常简单方便。但是在React中，ref使用起来要稍微复杂一些，并且对于不同的组件类型

学习目的 首先我们学习东西一定要带有目的或者需求，这样才能对我们有更加实际的帮助。比如我们学习源码，是想了解其中的一个知识点原理，是为了提升日常开发能力，或者只是为了帮助面试等等这些都是可以的，具体学

在之前的章节我们讲述了FiberTree的创建过程，但是对组件的加载过程这方面的细节没有深入。 本节将深入理解React18.2x 类组件的具体加载过程。 1，加载阶段 首先准备一个类组件案例： 然后

在之前的章节我们讲述了FiberTree的创建过程，但是对组件的加载过程这方面的细节没有深入。 本节将深入理解React18.2x 函数组件的具体加载过程。 1，加载阶段 首先准备一个函数组件案例：

在我们刚开始学习react时，react官方文档就提示我们react hook必须在函数组件顶层使用，不能在条件语句或者循环结构中使用。 之所以会有这样的规定，这和react hook的实现原理脱离不

在本系列的第二，第三章节已经完整的讲述了render阶段的scheduler调度流程和reconciler协调流程。 本节将深入理解react应用渲染流程的最后一个阶段commit阶段。 commit

本章节我们主要讲解Fiber Reconciler协调流程，即FiberTree的具体创建过程。 回到之前的renderRootXXX方法： 下面的讲解我们将renderRootSync同步渲染模式为

本节将深入理解React18.2x的scheduler调度程序的执行过程。 在学习之前，我们要先了解react应用的渲染流程主要有哪些阶段？ 根据react18的源码，我们可以分成两个大的阶段： re

之前一直主要是用的Vue技术栈，React使用相对较少。因为公司效益不好，已经处于行业下坡路，三四月份便有看外面机会的想法，刷过几次Boss，看到不少大的公司