虚拟 DOM 的 diff 算法

虚拟 DOM 的 diff 算法是比较新旧虚拟 DOM 树的差异，并确定需要更新的部分。它能够高效地更新 UI，并最小化对真实 DOM 的操作，从而提高性能。

Diff 算法的基本思想是通过遍历新旧虚拟 DOM 树的节点，并比较它们的类型、属性和内容来找到差异。根据差异的类型，可以执行相应的操作，如添加、更新或删除节点。

以下是简要的 diff 算法的步骤：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=6ba5d46dd6254d20809b2e18c249cbb9

比较根节点：首先比较新旧虚拟 DOM 树的根节点，确定它们是否相同类型的节点。如果不相同，直接替换整棵树；如果相同，进入下一步。

比较子节点：逐个比较新旧虚拟 DOM 树的子节点。该过程使用了两个技术：首先是"Key"算法，通过给列表中的每个元素添加唯一的标识（Key），以便更准确地找到新增、删除或移动的元素；其次是"优化"算法，通过尽量少地操作真实 DOM，如移动元素而非重新创建，从而提高性能。

递归比较：对于有子节点的元素，递归地进行步骤 1 和步骤 2，以便深度比较整个树的结构。

Diff 算法的核心优势是在更新过程中最小化对真实 DOM 的操作。而对真实 DOM 的直接操作是昂贵的，因为每次操作都会触发浏览器的重排和重绘。通过将更新操作批量应用，以及通过只更新变化的部分，Diff 算法能够大大减少对真实 DOM 的操作次数，从而提高性能。