1.React的算算法Diff算法 - 学习笔记（21）
2.React原理剖析之diff算法，一点也不难！法源！原理！算算法
3.搞懂React源码系列-React Diff原理
4.深入浅出 虚拟DOM、法源Diff算法核心原理（源码解析）
React的原理上海商城平台源码怎么用Diff算法 - 学习笔记（21）
在渲染阶段，对于需要更新的算算法组件，React 会进行 Diff 算法，法源比较当前组件与上次更新时对应的原理 Fiber 节点，生成新的算算法 Fiber 节点。这一算法的法源核心目标是高效地识别组件的变化，以最小化不必要的原理 DOM 操作，提高性能。算算法
Diff 算法的法源目标是避免对不同组件类型的子树进行匹配，推荐使用相同的原理组件类型以保持组件实例和 DOM 节点的一致性。Key 的选择应保持稳定、预测性和唯一性，以确保组件实例和 DOM 节点的稳定性，避免不必要的重建导致性能下降和状态丢失。
结合渲染与提交阶段，一个 DOM 节点最多与四个节点相关联。Diff 算法存在瓶颈，其复杂度为 O(n^3)，在展示大量元素时会导致大量计算。为此，React 采取了预设限制，优化 Diff 算法的执行效率。
Diff 算法的实现主要通过 `reconcileChildFibers` 函数进行，根据 `newChild` 类型调用相应的ird源码大全处理函数。React 使用了双阶段遍历法来优化 Diff 算法的执行过程，进一步提升性能。
在单节点 Diff 中，算法会根据节点类型调用特定的处理函数，如 `reconcileSingleElement`。在多节点 Diff 中，算法会根据子节点的数量进行分类处理，分别处理节点新增、减少、位置变化等情况。
在多节点 Diff 的情况下，算法首先识别更新节点的存在与否，然后基于此执行不同的操作。在节点数量减少时，算法需要标记被删除的节点；在节点数量增加时，算法会为新增的节点创建新的 Fiber 节点。当节点位置发生改变时，算法需要更新节点的位置标记。
为了确保 Diff 算法的高效执行，React 使用了 Map 结构存储每个节点的 key 和 Fiber 节点，以便快速查找和匹配。此外，算法还利用了 lastPlaceIndex 变量来跟踪节点的位置信息，判断节点在两次更新过程中的相对位置是否发生改变。
通过上述方法，Diff 算法在 React 中实现了高效地识别和处理组件更新，从而优化了性能并减少了不必要的 DOM 操作。这种机制不仅提高了应用的远程证明源码响应速度，还确保了状态的一致性和组件实例的稳定性。
React原理剖析之diff算法，一点也不难！！！
diff算法听起来很深奥。其实真的没那么难。今天我们就用最简单的话把diff算法讲清楚。虚拟Dom什么是虚拟Dom在传统的dom中只有真实Dom↓
这玩意就是真实DOM,我们能看见的节点元素。↓
react/vue这些组件化的框架诞生后，增加了一个概念，虚拟Dom。所以，在传统的浏览器和真实Dom之间增加了一层。虚拟Dom层。成了这样↓
虚拟DOM本质上他就只是一个对象！！！没什么难的，虚拟DOM就只是一个对象而已。只是这玩意，我们不能在视图上只管的看见，它在源码里。
我们拿一段真实DOM来映射一下与之对应的虚拟Dom↓
//真实DOM<divclass="d-class"key="d"><pclass="p-class">我是p元素</p></div>//与之对应的虚拟DOMconstvNode={ key:"d",//是否有key，有则显示，无则显示nullprops:{ //标签里是否子元素children:[{ type:'p',....},],onClick:()=>{ },//标签上的事件className:"d-class",//标签上的属性}ref:"null",type:"div"}vNode这种对象，这玩意就是react中虚拟DOM的真实面目。
为什么要有虚拟DOM因为重新从头生成个正正经经的osqpend源码剖析DOM节点开销实在是太大了！！！从浏览器开始创建一个节点到这个节点完全渲染到视图上去，是比较耗费性能的，当一群节点都需要去创建并渲染的时候，极端情况下，会出现肉眼可见的卡顿。虚拟Dom的作用就是尽量减少元素的创建。
我们再来一个简单的流程解释一下
//dom结构一<divclass="d-class"><pclass="p-class">我是p元素</p><div>后面需要被改变的标签<div></div>//dom结构二<divclass="d-class"><pclass="p-class">我是p元素</p><h1>节点被更改<h1></div>观察上面的dom节点一和dom节点二，不难发现。其实只有div改变成了h1。但就是这一个小小的改动，浏览器重新渲染的话，不用虚拟dom的情况下浏览器会这么做↓
删除所有节点
重新创建div标签，给div标签赋予class
在div下重新创建p标签，给P标签增加class并填充文本
在div下重新创建h1标签并填充文本
观察三个步骤，其中最耗费性能的，就是创建节点的过程。
在使用虚拟DOM的情况下。更新视图会有如下操作↓
比对结构一和结构二的树结构
发现div标签没有变。直接拿来复用（这样就不用删除也不用重新创建了）
发现p标签也没有变动，可以直接拿来复用（不用重新删除并创建）
发现div标签变成了h1标签，删除原先div标签，重新创建h1标签并插入（只有这一个需要重新生成）
然后就明朗了。
在不使用虚拟DOM的情况下，哪怕改变的只有一个子节点，所有的节点也都需要重新渲染。（我们以前使用JQ的项目附源码那个时代，就是这么干的）
在使用虚拟DOM的情况下。有很多没有改变的节点（或组件）可以被复用，直接省掉了好多创建节点的步骤。所以虚拟DOM会带来性能上的提升。
diff算法很简单，在虚拟DOM中，会有两棵树，一颗修改前的树，一颗修改后的树。
在react中，diff中有三大策略。
diff三大策略Treediff?(树比对)
比较新旧两棵树，找出哪些节点需要更新
发现组件则进入Componentdiff
发现节点则进入Elementdiff
Componentdiff（组件比对）
如果节点是组件，比对组件类型
类型不同直接替换（删除旧组件，创建新组件）
类型相同则只更新属性
然后深入组件进行Treediff(递归)
Elementdiff（元素比对）
如果节点是原生标签，则看标签名
标签名不同直接替换（删除旧元素，创建新元素）
标签名相同则只更新属性
然后深入标签做Treediff（递归）
比对会从Treediff(树比对开始)，扫到组件进入Componentdiff，扫到元素则进入Elemenetdiff。这是一个递归查询的过程。
key是干啥的？这玩意是如何对项目进行优化的。首先，diff会对新旧两颗树进行同级比较。绝不会出现跨层比较的情况。
在某一层比对发现元素类型不一样之后，自该层往下节点会直接全部删除，不会再往下比对。
更有意思的是↓
当组件树发生上图这样的变化时，从一个人类的思维来说，应该是删除p元素，再把span元素移动到左边。
但机器不是这么理解的!!
在机器的理解上，diff算法会对以上例子做出以下动作
比对新旧节点数第一层的div是否被更改，没有改动，进入下一层比较
发现旧节点树下第一个元素是p。新节点树下的第一个节点是span（p比span）
删除p元素，创建span元素。
再进行比对，发现旧节点树第二个元素是span,新节点树没有第二个元素（span比undefined）
删除span元素
也就是说，如果你删除第一个元素，后面所有的元素都会被删除然后重新创建。
基于机器这种笨重的思维方式情况下。
key诞生了。
说白了。key是一种标记。
没有用key的情况下机器默认的算法是按顺序一个一个去比较（注意奥，是按元素顺序去比较）。只要对应顺序上的元素类型对不上，直接删除然后重建。
但是!!用了key则不一样。用了key机器会开启另一种比较算法。
当虚拟dom发现一个节点存在key以后。他就不会按顺序去比较旧节点树中相同位置的那个元素。而是会在旧树的同级元素中遍历寻找该key所标记的节点是否存在。是否可以复用。
不使用key的情况
如上图所示，在不使用key的情况下。diff算法会根据元素的位置去比对。如果你像上图那样删除了第一个元素的话，后面的元素都会因为比对不成功而全部被删除然后重新创建。
在使用key的情况下
在使用了key的情况下,会寻找匹配新旧节点树中是否有可以复用的元素。这样可以避免不必要的性能浪费。
总结首先，虚拟dom本质上就只是一个js对象而已
diff算法有三大策略，树比对（Treediff）,组件比对（Componentdiff）,元素比对（Elementdiff）
尽量使用key，在增删元素的时候可以提高性能
创建并渲染一个节点的流程相对耗费性能，所以需要虚拟dom来尽量减少节点的重新创建和删除
原文：/post/搞懂React源码系列-React Diff原理
时隔2年，重新审视React源码，理解了许多过去未曾明晰的内容。本文聚焦于通过实际案例结合相关React源码，集中探讨React Diff原理。我们将使用当前最新React版本：..1。同时，今年计划推出“搞懂React源码系列”，旨在以通俗易懂的方式深入解析React的核心部分。年，该系列将涵盖以下内容：
React Diff原理
React 调度原理
搭建阅读React源码环境-支持所有版本断点调试
React Hooks原理
欢迎关注我的博客。
在深入Diff算法之前，有必要先理解React Fiber。虽然Fiber并不复杂，但全面理解需要时间。本文重点是Diff原理，因此Fiber介绍将简要进行。
Fiber是React中的抽象节点对象，它将所有节点连接成链表树。每个Fiber可能包含子Fiber、相邻Fiber以及父Fiber。React使用链表形式连接所有Fiber，形成树结构。Fiber还带有副作用标签（effectTag），如替换（Placement）和删除（Deletion），用于后续更新DOM。
值得注意的是，React Diff过程中，除了Fiber，还涉及基本的React元素对象，如将foo编译后的对象为：{ type: 'div', props: { children: 'foo' } }。
Diff过程始于reconcileChildren(...)
总流程如下：
reconcileChildren(...)
在Diff时，比较中的旧内容为Fiber，而新内容为React元素、文本或数组。新内容为对象时，流程分为两步：reconcileSingleElement(...)和placeSingleChild(...)。以React元素为例，流程如下：
reconcileSingleElement(...)
这里正式开始Diff，child为旧内容Fiber，element为新内容，它们的元素类型不同。React将“删除”旧内容Fiber及其所有相邻Fiber（添加Deletion标签），并基于新内容生成新的Fiber。然后将新Fiber设置为父Fiber的child。
如果新旧内容的元素类型相同，则通过fiber复用生成新的Fiber。同样设置为父Fiber的child。
总结新内容为React元素的Diff流程：
reconcileChildren(...)
新内容为文本时，逻辑与新内容为React元素类似。新内容为数组时，通过遍历数组元素，与React元素的处理方式类似，生成新的Fiber。
总结新内容为数组的Diff流程：
reconcileChildrenArray(...)
Diff的三种情况总结：比较结果相同：复用旧内容Fiber，结合新内容生成新Fiber
比较结果不同：仅通过新内容创建新Fiber
然后给旧内容Fiber添加替换标签，或给旧内容Fiber及其所有相邻元素添加删除标签。最后将新的（第一个）Fiber设为父Fiber的child。深入浅出 虚拟DOM、Diff算法核心原理（源码解析）
五一假期后，笔者试图通过面试找到新工作，却意外地在Diff算法的挑战中受挫。为了不再在面试中尴尬，我熬夜研究了源码，希望能为即将面临同样挑战的朋友们提供一些帮助。
首先，让我们来理解什么是虚拟DOM。真实DOM的渲染过程是怎样的？为什么需要虚拟DOM？想象一下，每次DOM节点更新，浏览器都要重新渲染整个树，这效率低下。虚拟DOM应运而生，它是一个JavaScript对象，用以描述DOM结构，包括标签、属性和子节点关系。
虚拟DOM的优点在于，通过Diff算法，它能对比新旧虚拟DOM，仅更新变动的部分，而非整个DOM，从而提升性能。Diff算法主要流程包括：对比旧新虚拟DOM的差异，确定需要更新的节点，然后仅更新这部分的真实节点。
例如在React、Vue等框架中，Vue2.x采用深度优先策略，而Vue3.x可能使用不同方法。核心的patch.js文件中，patchNode函数会处理添加、删除和更新子节点的情况，采用双端比较策略，确保高效更新。
虽然文章已在此打住，但思考题仍在：当新节点(newCh)比旧节点(oldCh)多时，如何处理多出的节点？试着模拟这个过程，通过画图理解，这将有助于深入理解Diff算法的工作原理。
