react的diff算法及虚拟DOM原理_react 虚拟dom更新原理

一、虚拟DOM是一个轻量级的javascript对象，她是React组件层次结构的映射。当组件的状态发生变化时，React会使用虚拟DOM来计算出最小的DOM操作，并将其应用于实际的DOM树，从而实现高效的UI更新。

二、Diff算法是React用于比较两个虚拟DOM树的技术，以确定需要进行的最小DOM操作。下面是Diff算法的基本原理

        1、树的比较：React将新旧虚拟DOM树逐个节点进行比较，找出不同的节点

        2、同级比较：React只会比较不同的节点，不会跨级比较。如果节点类型不同，React会直接替换整个节点及其子树。

        3、唯一标识：React使用唯一的key属性来标识列表中的每个节点，以便更准确的比较和更新节点 及其子树

        4、更新策略：React会尽量复用已存在的DOM节点，而不是直接创建新的节点。只有在必要的情况下才会创建，移除或更新DOM节点。

        5、批量更新：React将多个DOM操作合并为一个批量更新，以提高性能