day180-Virtual DOM-再探

要点

  1. Virtual DOM的是三个重要步骤;
  2. Virtual DOM的具体步骤;

Virtual DOM的是三个重要步骤

  • 生成Virtual DOM树
  • 对比两棵树的差异(diff)
  • 更新试图(patch)

Virtual DOM的具体步骤

生成Virtual DOM树

例子:

真实DOM

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

DOM树

let element = {
tagName: 'ul',
props: { id: 'list' },
children: [
{ tagName: 'li', props: { class: 'item' }, children: ['Item 1'] },
{ tagName: 'li', props: { class: 'item' }, children: ['Item 2'] }
]
}

对比两棵树的差异

对树进行遍历:深度优先遍历、广度优先遍历

diff算法中采用深度优先遍历。对新旧两棵树进行一次深度优先的遍历,这样每个节点都会有一个唯一的标记。

遍历时,每遍历到一个节点就把该节点和新的树的同一个位置的节点进行对比,如果有差异的话就记录到一个对象(差异对象)里面。

差异对象(常见的差异)

替换节点
增加/删除子节点
修改节点属性
改变文本内容

更新视图

根据差异的不同类型,对DOM进行针对性的更新。
更新视图(针对相应差异的更新方法)

replaceChild()
appendChild() / removeChild()
setAttribute() / removeAttribute()
textContent

文章作者: lmislm
文章链接: http://lmislm.com/2019/07/12/2019-07-12/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog