什么是虚拟 DOM，它是如何工作的？

在现代 Web 开发中，性能和效率是创建用户界面时的关键部分。虚拟 DOM 是使 React 等框架快速高效的关键创新之一。但究竟什么是虚拟 DOM？它是如何工作的。让我们在这个博客中详细了解。

什么是虚拟 DOM？

DOM（Document 对象模型）将网页的结构表示为树元素。当 UI 中发生任何更改时，浏览器会更新 DOM，这可能会很慢且效率低下，特别是如果应用程序很大。
为了解决这个问题，引入了虚拟 DOM，它是 DOM 的抽象表示，当在 UI 中进行任何更改时，而不是直接修改真正的 DOM。更改首先应用于虚拟 DOM，仅对真正的 DOM 进行必要的更改，从而提高性能。

虚拟 DOM 是如何工作的？

虚拟 DOM 遵循三个步骤来有效地更新 UI。

1. 渲染虚拟 DOM

• 当 React 组件渲染时，会创建一个虚拟 DOM。
• 这是实际 DOM 的轻量级副本，但它仅存在于内存中。

2. 比较更改

• 当应用程序状态更改时。生成一个新的 Virtual dom。
• React 使用称为 Reconciliation 的流程将更改与之前的更改进行比较。
• 它检查 UI 的哪个部分发生了变化。

3. 更新真实的 DOM

• React 仅对实际 DOM 进行必要的更新，而不是更新整个 UI。
• 这减少了性能问题并使渲染更快。

为什么虚拟 DOM 更快？

• 而不是对 DOM 进行多次更新。它会更新批量。React 将所有更改和更新分组在单个批处理中。
• React 会计算更改并仅在需要时应用，而不是重新绘制整个 UI。

示例：运行中的虚拟 DOM。

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

• 单击按钮时，setCount 会更新状态。
• 将使用 update count 值创建一个新的虚拟 DOM
• React 将其与之前的虚拟 DOM 进行比较，发现只有 h1 标签发生了变化。
• 而不是重新渲染整个页面。React update 唯一的 h1 标签。

出处：https://dev.to/