虚拟DOM和DOMdiff学习笔记

虚拟DOM和DOMdiff

什么是虚拟DOM：

一个能代表DOM数的对象，通常含有标签名，标签上的属性，时间监听和子元素们，以及其他属性。

eg:创建一个虚拟DOM

createElement('div',{className:'red',onClick:()=>{}},[						createElement('span',{},'span1')])
	createElement('span',{},'span1')])
	]
)

虚拟DOM的优点

• 减少DOM操作

  虚拟DOM可以将多次操作合并为一次操作，比如要添加1000个节点，DOM要操作1000次，但是虚拟DOM一次就可以了，虚拟DOM其实是在优化操作，而不是优化性能。

  虚拟DOM借助DOM diff可以把多余的操作省掉，比如添加1000个节点，其实只有10个是新增的，那么虚拟DOM就会只更新10个节点。这一次虚拟DOM是在减少操作的范围

• 跨平台

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

虚拟DOM的缺点

需要额外的创建函数，如createElement或h,但是可以通过JSX来简化成XML写法（这种方法严重依赖于打包工具）。

当规格比较小时，虚拟DOM比DOM快，但是当规模比较大时，DOM会更快。

什么是DOM diff

DOM diff的大概逻辑

• Tree diff
  • 将新旧两棵树进行逐层对比，找出哪些节点需要更新
  • 如果节点是组件就看Cpmponent diff
  • 如果节点是标签就看 Element diff
• Component diff
  • 如果节点是组件，就先看组件类型
  • 类型不同直接替换，（删除旧的）
  • 类型相同只更新属性
  • 然后深入组件做Tree diff（递归）
• Element diff
  • 如果节点是原生标签，则看标签名
  • 标签名不同直接替换，相同则只改变属性
  • 然后进入标签后做Tree diff(递归)