虚拟dom

83 阅读2分钟

什么是虚拟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进行描述

  1. 如果是html浏览器 渲染成真实的DOM
  2. 如果是android,渲染成android对应的UI代码
  3. 如果是ios,渲染成对应IOS代码