前端进阶之React VDom的理解

2024 年 7 月 23 日 17点热度 0人点赞 0条评论

1.虚拟 DOM

通过 3 个要点讲解虚拟 DOM：

描述浏览器的渲染过程
真实 DOM 操作昂贵，所以需要虚拟 DOM
Diff 简要做了什么，key 在当中扮演什么角色

1.1要点：浏览器的渲染过程

创建 DOM 树。用 HTML 解析器分析 HTML 元素，创建一棵 DOM 树。
创建 CSS 规则树（CSS rule tree）。用 CSS 解析器解析 CSS 文件和 inline 样式，生成页面的样式表。
创建 Render 树。将 DOM 树和 CSS 规则树关联起来，构建 Render 树。
布局 Layout。根据 Render 树，浏览器开始布局，为每个 Render 树上的节点确定一个在显示器上出现的精确坐标。
绘制 Painting。在 Render 树和节点显示坐标的基础上，调用每个节点的 paint 方法，将它们绘制出来。

1.2：DOM 操作昂贵

频繁地操作 DOM，导致频繁的出现回流跟重绘，会产生一定的性能问题，因此我们需要这一层抽象，在 patch 过程中尽可能地一次性将差异更新到 DOM 中，这样保证了 DOM 不会出现性能很差的情况。

但是这样并不能解决问题，所有就有了虚拟 DOM。

虚拟 DOM 本质就是用一个原生的 JavaScript 对象去描述一个 DOM 节点，是对真实 DOM 的一层抽象。

真实dom

<div id="container">
  <ul>
    <li></li>
  </ul>
</div>

JS 模拟虚拟 DOM

const tree = Element('div', { id: 'container' }, {
  Element('ul', {}, [
    Element('li', {}, ['新节点值'])
  ]),
});

const root = tree.render();
document.querySelector('#container').appendChild(root);

可以看到虚拟 DOM 对象最基本的三个属性：

标签类型
标签元素的属性
标签元素的子节点

1.3 要点：Diff 算法

两棵树完全对比的时间复杂度是 O(n^3)，而 React 的 Diff 算法的时间复杂度是 O(n)。

要实现这么低的时间复杂度，意味着在比较差异时只会对同一层级的节点进行比较，因为如果进行完全的比较，算法实际复杂度会过高，所以舍弃了这种完全的比较方式，而采用同层比较。

Diff 算法的核心就是对虚拟 DOM 节点进行深度优先遍历，并对每一个虚拟节点进行编号，在遍历的过程中对同一个层级的节点进行比较，最终得到比较后的差异。

假设现在的虚拟 DOM 的更新前后为：

// DOM 节点值
const dom = `
  <div id="container">
    <p>123</p>
    <ul>
      <li class="jsliang1">li 节点</li>
      <li>旧节点值</li>
    </ul>
  </div>
`;

// 旧节点
const tree = Element('div', { id: 'container' }, [
  Element('p', {}, ['123']),
  Element('ul', {}, [
    Element('li', { class: 'jsliang1' }, ['li 节点']),
    Element('li', {}, ['旧节点值']),
  ]),
]);

// 变成下面新的虚拟 DOM
const tree = Element('div', { id: 'container' }, [
  Element('h3', {}, ['小标题']), // 更新节点
  Element('ul', {}, [
    Element('li', { class: 'jsliang2' }, ['li 节点']), // 更新属性或者属性值
    Element('li', {}, ['新节点值']), // 更新文本
  ]),
]);

Diff 获取虚拟 DOM 节点变更的 4 种情况比较：

节点类型变了。<p> -> <h3>。直接 Replace，将旧节点卸载并装载新节点。
节点类型一样，仅仅属性或者属性值变了。直接 Props，更新节点。
文本变了。直接 Text，修改文字内容就行了。
增加、删除或者移动了子节点。直接 Reorder，这个方法比较复杂，小伙伴们具体可以去了解下。

Diff 的实现，最粗暴的方法就是遍历每个新虚拟 DOM 节点，和旧虚拟 DOM 节点比对。在旧 DOM 中是否存在，不同就卸载原来的上新的。

这时候不得不提一下 React 或者 Vue 里面的 key，我们在写业务的时候，被告知 key 值不能是索引值 index。

为什么这样子呢？

假设我们有 4 个元素，旧的元素是 1、2、3、4，新的元素是 1、3、2、4，但是如果我们用了索引值 index，那么它们就一直是 0-3。

这样子的话，我们 React 或者 Vue 就没法比较好的监听它的一个变动。

所以一般来说，我们将 key 值定位成数组的 id 或者其他值，方便它变动的时候去监听。

这样子通过 Diff 比较完毕之后，我们就可以获取需要变动的内容，最终去更新真实 DOM 节点。

2.虚拟 DOM 实现原理

虚拟 DOM 本质上是 JavaScript 对象，是对真实 DOM 的抽象
状态变更时，记录新树和旧树的差异
最后把差异更新到真正的 DOM 中

3.虚拟 DOM 和真实 DOM 比对

优点：

保证性能下限：虚拟 DOM 可以经过 Diff 找出最小差异，然后批量进行 patch，这种操作虽然比不上手动优化，但是比起粗暴的 DOM 操作性能要好很多，因此虚拟 DOM 可以保证性能下限。
无需手动操作 DOM：虚拟 DOM 的 Diff 和 patch 都是在一次更新中自动进行的，我们无需手动操作 DOM，极大提高开发效率。
跨平台：虚拟 DOM 本质上是 JavaScript 对象，而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、移动端开发等。