虚拟（Virtual）dom

什么是虚拟DOM？

虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。

Virtual DOM 是 React 中的一种内存中的表示方式，它是 React 组件树的一个轻量级副本。React 使用 Virtual DOM 来跟踪应用程序的状态，以便在必要时更新 DOM 元素。

虚拟 DOM 是 React 中的一个概念，它是一个轻量级的最小化浏览器 DOM 的 JavaScript 对象，包含了真实 DOM 元素的所有信息，比如元素类型、属性和子元素等，并能够在发生改变时，尽可能高效地更新真实 DOM。

虚拟 DOM 是一个 JavaScript 对象，而真实 DOM 是浏览器中的原生 DOM 树。虚拟 DOM 通过使用 JavaScript 数据结构描述页面的状态，然后可以根据这个状态生成真实 DOM 树，并与最初的 DOM 树进行比较，找出差异然后进行最小化的 DOM 更新。

相比之下，更新真实 DOM 需要大量计算和 DOM 操作，因此效率较低。虚拟 DOM 可以快速生成、更新和销毁，因此在 React 中被广泛使用。

在 React 中，虚拟 DOM 的更新是通过 Diff 算法来实现的。Diff 算法比较两棵树的节点，找出它们之间的差异，然后在最小化的修改真实 DOM 节点。这个过程是非常高效的，因为它避免了对整个 DOM 树进行操作。

Diff 算法在比较两个树的节点时，优先检查先前的树的根节点，并且尝试更新或删除该节点。如果根节点相同，则比较它们的子节点。它递归地进行此操作，直到比较了整个树。

当 setState() 或 props 发生改变时，React 将重新运行从组件树的根到发现的更改所属的组件的渲染函数，生成新的虚拟 DOM 树。

React 将新的虚拟 DOM 树与之前的虚拟 DOM 树进行比较，并找出差异。然后它使用这些差异来计算最小的 DOM 更改，并使用这些更改对真实 DOM 进行更新。

对于相同的组件，React 将仅更新已更改的属性，而对于不同的组件，虚拟 DOM 算法将递归地遍历组件树，直到找到差异为止。

在 React 中，key 是一种特殊属性，用于在虚拟 DOM 更新期间帮助 React 定位相应的 DOM 元素。当重新渲染组件列表中的元素时，React 将使用 key 来区分在先前渲染中已存在的元素和在新渲染中需要添加的元素。

如果没有 key 属性或 key 属性相同，React 将不能正确地识别哪个元素已更改、添加或删除，导致显示错误。

因此，使用 key 属性是保证 React 列表元素顺序正确，性能高效的重要方法之一。一般来说，您可以使用唯一的标识符、索引或内容作为 key 属性。