简单说明 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

发表评论

电子邮件地址不会被公开。 必填项已用*标注