如何理解Virtual DOM?

时间：2019-09-05 15:09:08

管理应用程序状态和用户界面的同步一直是UI开发复杂性的主要来源。因此出现了一系列的框架来解决这个问题，其中 Virtual DOM 正是 React 框架采用的解决方案。

Virtual DOM 就是用 JS 来模拟 DOM 的结构，Virtual DOM 是一个 JS 对象。

React 状态发生改变后，会生成一个新的 VDOM，然后利用 Diff 算法，比较新旧 VDOM 的差异部分，然后更新到真实 DOM。（具体 React Diff 算法看这里《了解React Diff 算法》）

从另外一个角度看，可以将JS对象（VDOM）渲染到浏览器DOM以外的环境中，也就支持了跨平台开发，比如ReactNative。

一、Virtual DOM 是什么？

vdom是虚拟DOM(Virtual DOM)的简称，指的是用JS模拟的DOM结构，将DOM变化的对比放在JS层来做。换而言之，vdom就是JS对象。

二、为什么要用 Virtual DOM？

管理应用程序状态和用户界面的同步一直是UI开发复杂性的主要来源。Virtual DOM 就是 React 框架的解决方案。

举个例子：

// 把这个 js 对象渲染成一个表格
let data = [
  {name:'zhongxia1',age:18,score:98},
  {name:'zhongxia2',age:19,score:99},
  {name:'zhongxia3',age:20,score:100},
]

2.1、直接操作 DOM

const render(data){
  // 这里的例子，就不写 table thead 部分了
  let str = '<table>'
  for(let i=0;i<data.length;i++){
      str += `
        <tr>
          <td>${data[i].name}</td>
          <td>${data[i].age}</td>
          <td>${data[i].score}</td>
        </tr>
      `
  }
  str += '</table>'
}

// 渲染到页面上
$('#table').html(render(data))

// 现在data 删除了一行数据 
data.pop()
$('#table').html(render(data))

// 每次data 改变都需要去重新 render 一次
data.push({name:'nimeng',age:16,score:59})
$('#table').html(render(data))

上面的实现方式存在一个问题，那就是每次 data 发生变化都需要重新构建表格部分的 DOM。不管数据是变化了很多地方，或者是只变化了一个值，都会构建所有。

因为这种情况，有人说 Vitrual DOM 的性能比直接操作真实 DOM高，是可以理解，但不全面。因为操作真实DOM 可以优化呀，经过一顿优化后，最优性能肯定比 Virtual DOM 方案的性能更优。

操作 DOM 方案：总渲染时间 = 渲染 DOM 节点的时间

Virtual DOM 方案：总渲染时间 = diff 时间 + 渲染 DOM 节点时间

Virtual DOM 方案最终还是要操作真实 DOM 的，并且还需要有一个 diff 比较的时间。

2.2、性能和效率的权衡

开发是一个工程化问题，性能的追求其中一个衡量的点，还需要考虑开发效率，可维护性，扩展性，以及多人协作的问题。

手动优化过的操作 DOM 性能的确可能比 Virtual DOM 方案更优，但是需要额外的优化时间。而 React 框架利用 Virtual DOM + Diff 算法计算出每次重新渲染更新的部分，就算不经过优化，性能也基本处于一个不错的阶段。

因此开发者可以更专注于业务上的开发，提升开发的效率。

上面说的，只能说是为什么要用框架的原因。并不是一定要 Virtual DOM 的原因。至于 React 为什么要选择 Virtual DOM，就得问他们自己了。

不过 Virtual DOM 是 JS 对象，并不是真实的 DOM，因此可以将JS对象（VDOM）渲染到浏览器DOM以外的环境中，也就支持了跨平台开发，比如ReactNative。这也是 Virtual DOM 的另外一个好处了。

三、怎么用 Virtual DOM？

怎么用 Virtual DOM，这个 React 内部已经封装了，因此只需要看 React 的基本使用方法即可。

如果对于怎么实现 VDOM有兴趣，可以去了解下这个《snabbdom》。

zhongxia245 / blog

【20190822】如何理解 Virtual DOM #102