简单说明 Virtual DOM 为啥快

Virtual DOM 就是用 JS 的对象来描述 DOM 结构的一个 DOM 树。如：

var element = {
  tagName: 'ul', // 节点标签名
  props: { // DOM的属性，用一个对象存储键值对
    id: 'list'
  },
  children: [ // 该节点的子节点
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

这个 DOM 树会通过算法生成真实的 DOM 插入到页面中。

当要修改 DOM 的时候，我们更新 state 的数据后，会得到一个新的 Virtual DOM 树，然后用新的 Virtual DOM 树和老的进行 diff 算法，得到差异，最终只将这些差异应用到老的真实 DOM 中，得到新的真实 DOM，从而页面更新到最新的状态。

那为什么要使用一个 JS 对象来描述 DOM 树呢？进行两个 Virtual DOM 的 diff 算法，然后应用到真实 DOM 上，这些操作不是加大了性能消耗吗？

而实际原因是，因为操作 DOM 是性能很差的，比操作 JS 性能差太多。即便我们增加了这些算法，而在操作 DOM 的时候却会少操作部分 DOM，所以最后性能也是会好很多的。

比如：

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

要把它变成

<ul>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

通常的操作是什么？
先把0， 1，2，3这些Element删掉，然后加几个新的Element 6，7，8，9，10进去，这里面就有4次Element删除，5次Element添加。
而React会把这两个做一下Diff，然后发现其实不用删除0，1，2，3，而是可以直接改innerHTML，然后只需要添加一个Element（10）就行了，这样就是4次innerHTML操作加1个Element添加，比9次Element操作快多了吧？

参考：https://www.zhihu.com/question/29504639?sort=created