虚拟 DOM 的工作流程主要包括以下几个步骤

构建虚拟 DOM 树：在初始渲染时，React 会创建一个虚拟 DOM 树，反映组件当前的状态。

组件重新渲染：当组件的状态或属性发生变化时，React 会触发组件重新渲染，并生成新的虚拟 DOM 树。

比较（Diffing）：React 使用高效的算法（通常是 DFS 算法）比较新旧虚拟 DOM 树，从而计算出差异。它会按照层级对子树进行比较，这样可以快速识别出需要更新的部分。

通过比较节点的类型、key 和属性来确定哪些节点发生了变化。
只有发生变化的节点会被更新，从而避免不必要的渲染。
更新真实 DOM：根据比较结果，React 会只更新那些发生变化的 DOM 节点，而不是整个重绘。这是通过将变化记录下来的最小列表来实现的。

批量更新：React 会批量处理所有的 DOM 更新，减少因多次更新引起的性能损耗。https://www.nowcoder.com/issue/tutorial?zhuanlanId=j572L2&uuid=ad4c96561557439591c01368cbe8144a