浅谈DOM和DOM diff

1-虚拟 DOM 是什么？ 

        一个能代表DOM树的对象，通常含有标签、标签上的属性、事件监听和子元素们，以及其他的属性

 

* React.createElement
createElement('div',{className:'red',onClick:()=> {}},[
    createElement('span', {}, 'span1'),
    createElement('span', {}, 'span2')
  ]
)
 
* Vue（只能在 render 函数里得到 h）
h('div', {
  class: 'red',
  on: {
    click: () => { }
  },
}, [h('span',{},'span1'), h('span', {}, 'span2'])

 

2-虚拟 DOM 的优点？

• 减少 DOM 操作

            虚拟 DOM 可以将多次操作合并为一次操作，比如你添加 1000 个节点，却是一个接一个操作的（减少频率）

            虚拟 DOM 借助 DOM diff 可以把多余的操作省掉，比如你添加 1000 个节点，其实只有 10 个是新增的（减少范围）

• 跨平台

            虚拟 DOM 不仅可以变成 DOM，还可以变成小程序、iOS 应用、安卓应用，因为虚拟 DOM 本质上只是一个 JS 对象

 

 

3-虚拟 DOM 的缺点？

      需要额外创建函数，比如createElement,但是可以使用JSX简化写法，但是使用JSX就会严重需要依赖JSX文件

 

 

4-DOM diff 是什么？

       就是一个函数，我们称之为 patch

        patches = patch(oldVNode, newVNode)

       patches 就是要运行的 DOM 操作

 

 

5-DOM diff 的优点？

    DOM diff会层层递进，只更新需要更新的内容

 

6-DOM diff 的问题（key）？

    存在识别错误的问题，只需要对每一个相同类型的同级标签添加一个唯一的key就行，这样DOM diff就会明确知道你操作的是哪个元素。