什么是虚拟DOM?
- 在内存中的一个映射有真实dom关键信息的对象(包含了元素的标签类型,属性===)组件创建的时候就会创建一个虚拟DOM树,当数据更新时也会产生新的虚拟DOM树
虚拟dom的作用?
-
当真实dom发生变化是如果没有虚拟dom他会都更新,会导致重绘和回流,频繁操作性能变差
-
有虚拟DOM他就会diff来更新dom(元素开始按广度优先逐层按序比较,只会更新真实DOM中需要改变的地方只会有一次重绘和回流)
diff
- 无key & key = index
尽可能的尝试就地修改/复用相同类型元素
采取的就地更新的原则根据他的下标进行比对,处在同一个索引位置相同就会被认为是同一个元素,没有使用unshift,sort,reverse操作进行重排,他的效率也是很高的,但当进行了上诉操作,他会把不必要更新的元素也更新掉,浪费性能。
- 有key
基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素 把key作为唯一标识,就算打乱了元素的顺序他也会知道哪些元素是不需要更新的
补充:深度遍历&广度遍历
提问:虚拟DOM除了更新DOM外还可以实现什么
跨平台渲染,因为虚拟DOM只是一个包含真实DOM关键信息的Vnode,对真实DOM进行描述
- 如果是html浏览器 渲染成真实的DOM
- 如果是android,渲染成android对应的UI代码
- 如果是ios,渲染成对应IOS代码
图