一、虚拟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操作合并为一个批量更新,以提高性能