React---虚拟DOM、Diff算法、Key作用虚拟DOM原理渲染虚拟DOM: 当应用的状态变化时，React会渲

虚拟DOM

虚拟DOM是一个JS对象树，用于描述真实DOM的结构和属性，包含标签类型，属性props和子元素children的对象。【虚拟DOM可以是对象，数组，字符串。。。】

typeVNode = {
   $$typeof:Symbol;
   type:string;
   key:string | null;
   ref:unknow | null;
   props:any
}

const element = <div> Hello,React</div>

//转译后的React.createElement调用
const element =React.createElement('div',null,'Hello,React')

React的commit阶段是不可中断的，在这个阶段，React会将计算好的变化应用到真实DOM上。若中断，可能会导致DOM不一致，用户看不到完整的UI更新，造成页面闪烁现象

虚拟DOM构建：React通过JSX编译生成虚拟DOM树。
协调（Reconciliation）:React会将新构建的虚拟DOM树与前一次渲染的虚拟DOM树进行比较。React使用diff算法找出两个树之间的差异，确定哪些部分需要更新。
生成Fiber树：根据协调阶段确定需要更新的部分，React会生成Fiber树。
构建工作单元：React 将确定的更新操作分解成多个称为工作单元的任务，这些任务被组织成 effect list（副作用列表）。每个工作单元都与一个 Fiber 节点关联，包括组件的添加、更新、删除操作，以及可能的副作用（如生命周期方法的调用）。
执行工作单元：React 使用调度器来管理这些工作单元的执行顺序。调度器会根据任务的优先级决定执行顺序，以确保高优先级任务（如用户交互）优先执行。React 会依次执行这些工作单元，更新组件状态，执行必要的副作用。
更新Fiber树：在执行工作单元时，React 会根据任务的结果更新 Fiber 树。这可能包括改变 Fiber 节点的状态、创建新的 Fiber 节点、或者标记某些节点为不需要渲染。在所有工作单元执行完毕后，Fiber 树的最新状态将被用于最终的 DOM 更新。

React框架设计：数据驱动【数据的改变---》React生成新虚拟DOM---》对比新旧虚拟DOM---〉发现差异节点---》1:有差异，更新真实DOM对应部分。2:无差异，不更新】

不一定，简单页面中，只有几个节点，虚拟DOM的Diff和JS计算可能比直接操作DOM更耗时。

通过3条规则限制对比范围：

传统diff算法的复杂度是O(n^3),React通过三大策略，将复杂度O(n^3)转换成O(n)

第一次让新的 VDOM 和旧的 Fiber 进行对比，看有没有能复用的节点，如果有，继续遍历，如果没有，就停止遍历。
判断新的 VDOM 有没有遍历完，如果遍历完，把旧的 Fiber 中剩下的节点删掉即可。若新的 VDOM 没有遍历完，则进行第二次遍历。
第二次遍历时，把旧的 Fiber 中剩下的节点，放入一个 Map，然后遍历新的VDOM 剩下的节点，看当前遍历的 VDOM 有没有存在于这个 Map 里面，若存在，则表明可以复用，打上更新的标记。
遍历完新的 VDOM 后，旧的 Fiber 剩下的节点打上删掉标记，新的 VDOM 中新增的节点打上新增标记

因为Fiber结构上没有设置反向链表,双端diff需要向前查找节点，但每个FiberNode节点上都没有反向指针。即前一个FiberNode通过sibling属性指向后一个FiberNode，只能从前往后遍历，不能反过来。

React中的keys主要是帮助React识别和跟踪虚拟DOM中元素的变化。

在React的协调（Reconciliation）过程中，React渲染组件时，会创建一个虚拟DOM树，与之间的虚拟DOM树进行比较，找出差异，并将差异应用到真实的DOM上。

比较过程中，React对每个元素进行唯一性判断，确定是否需要更新该元素。唯一性判断就是依赖于key属性。React使用key属性的值判断元素是否相同，若两个元素的key相同，认为是同一个元素，复用之前的组件实例，减少重绘操作。

Key用于匹配新旧虚拟DOM树中的元素：

在动态列表中，项目的顺序或数量会在重新渲染时发生变化。在基于“索引”实现中，数组无论怎么排序，数组中的第一项总是key="0",React在进行比较时，会认为是完全相同的项目，只是props的值不同。

使用场景：分页列表。