Virtual DOM 算法——虚拟DOM

虚拟DOM：将真实DOM树上的结构、属性信息等用JavaScript 对象的形式来表示
栗子：
HTML写法：

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

对应JavaScript 对象表示

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"]},
  ]
}

Virtual DOM 算法：当状态变更时，比较两棵新旧虚拟DOM树的差异（核心部分：diff算法)，将找出的差异部分进行DOM操作

简单总结：

1、构建虚拟DOM

2、通过虚拟DOM构建真实DOM

3、生成新的虚拟DOM

4、diff算法比较两颗虚拟DOM的差异

1）只会对同一个层级的元素进行对比
2）深度优先遍历，记录差异
3）差异类型
可能出现的DOM操作：节点替换、删除、新增、修改、更改列表顺序等
因为节点是可重复的，所以需要给子节点加上唯一标识key，列表对比的时候，使用key进行对比，这样才能复用老的 DOM 树上的节点，记录下每个节点的差异

5、真实DOM上只应用变更记录下来的差异部分即可

来自：https://github.com/livoras/blog/issues/13