Geeki's Blog

⚛ React›Diff 算法原理

步骤 1 / 6

什么是 Virtual DOM？

Virtual DOM 是真实 DOM 的轻量 JS 对象描述。React 先在内存中对比两棵 VNode 树，再将最小差异批量更新到真实 DOM。

JS 对象（VNode）

// Virtual DOM 本质上是一个 JS 对象
const vdom = {
  type: "div",
  props: { className: "container" },
  children: [
    {
      type: "h1",
      props: {},
      children: ["Hello, React!"],
    },
    {
      type: "p",
      props: { id: "desc" },
      children: ["这是一段描述"],
    },
  ],
};

⟶render

真实 DOM

<h1>Hello, React!</h1>

<p id="desc">这是一段描述</p>

</div>