虚拟Dom

waruqi 发布于2019-08-23 17:08 / 2105人阅读

Virtual Dom

vdom 是vue和react的核心

vdom是什么东西，有什么用，为什么会存在vdom?

vdom如何应用，核心API是什么?

diff算法

## 什么是vdom ##

用js模拟DOM结构

DOM变化的对比，放在JS层来做

提高重绘性能

 
   Item 1
   Item 2

用js来模拟

 {
   tag:"ul",
   attrs:{
     id:"list"
   },
   children:[
    {
       tag:"li",
       attrs:{ className: "item"},  //class是js的保留字，所以用className
       children:["Item 1"]  
    },{
       tag:"li",
       attrs:{ className: "item"},
       children:["Item 2"]  
      }
    ]
 }

设计一个需求场景，渲染一个数组成表格

 //Jquery的实现
 
    
    
        
        
        
        Document

上述办法遇到的问题

js原生或者是Jquery框架时代，都是直接操作DOM节点来进行渲染页面，可是这样的代价确实是很大，需要将原本的DOM全部清除，然后在重新渲染一遍

操作Dom非常昂贵。每个Dom自带了太多的属性。 js运行效率高

尽量减少Dom操作

项目越复杂，运行效率越低，影响越严重

vdom 可以解决这个问题，将Dom操作方在Js层，提高效率

vdom如何应用，核心API

snabbdom
为什么是snabbdom.js
由于虚拟dom有那么多的好处而且现代前端框架中react和vue均不同程度的使用了虚拟dom的技术，因此通过一个简单的库赖学习虚拟dom技术就十分必要了，至于为什么会选择snabbdom.js这个库呢？原因主要有两个：

源码简短，总体代码行数不超过500行。
著名的vue的虚拟dom实现也是参考了snabbdom.js的实现。

用snabbdomjs 实现上述例子




    
    
    
    Document

//修改数据只是修改了第二个item 第三，第一个数据没变化（F12查看Element 第一个item没有闪烁）

diff算法

什么是diff算法

去繁就简

vdom 为何用diff算法

diff算法的实现流程

diff命令是linux系统自带的基础命令
git diff 判断文本文件哪里被修改了
diff算法一直都在，并不是因为react、vue才出现的

vdom为何使用diff算法

DOM 操作是昂贵的，因此尽量减少DOM操作

找出本次DOM必须更新的节点来更新，其他的不更新

这个找出的过程，就需要diff算法

diff实现过程

只需要明白

path(container,vnode)

path(vnode,newnode)

通过VNode创建一个真实的DOM的流程

  function createElement(vnode){
   var tag= vnode.tag
   var attrs = vnode.attrs||{}
   var children = vnode.children || []
   if(!tag){
       return null
   }
   var elem = document.createElement(tag)
    var attrName 
    for(attrName in attrs){
     if(attrs.hasOwnProperty(attrName)){
        elem.setAttribute(attrName,attrs[attrName])
      }
    }

    children.forEach(childNode => {
        elem.appendChild(createElement(childNode))
    });
    //返回真实的Dom
    return elem
}

path(vnode,newVnode) 的实现，

function updateChildren(vnode,newVnode){
     var children = vnode.children || []
     var newChildren = newVnode.children || []
    
     //遍历现有的children
     children.forEach((child,index )=> {
         var newChild = newChildren[index]
         if(newChild == null){
            return
         }

         if(child.tag === newChild.tag){
              updateChildren(child,newChild)
         }else{
             replaceNode(child,newChild)
         }
     });
}

function replaceNode(vnode,newVnode){
    var elem = vnode.elem
    var newElem = createElement(newVnode)
}

不仅仅是以上的内容，还有以下的内容

节点新增和删除

节点重新排序

节点属性、样式、事件绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103858.html

虚拟Dom详解 - (一)

摘要：为此也做了一些学习简单的侃一侃虚拟到底是什么虚拟详解二什么是虚拟虚拟首次产生是框架最先提出和使用的，其卓越的性能很快得到广大开发者的认可，继之后也在其核心引入了虚拟的概念。所谓的虚拟到底是什么也就是通过语言来描述一段代码。随着Vue和React的风声水起，伴随着诸多框架的成长，虚拟DOM渐渐成了我们经常议论和讨论的话题。什么是虚拟DOM，虚拟DOM是如何渲染的，那么Vue的虚拟Dom...

ashe 2019-08-26 10:36 评论0 收藏0
虚拟DOM

摘要：什么是虚拟举例说明如果网页中有一个表格，表头是姓名，年级，分数。即我们用虚拟的结构替换需要处理的结构，对虚拟的进行操作之后再进行渲染，就成为了真实的数据。当状态变更的时候用修改后的新渲染的的对象和旧的虚拟对象作对比，记录着两棵树的差异。虚拟DOM 可以看看这个文章如何理解虚拟DOM？ - 戴嘉华的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

yanwei 2019-08-23 12:11 评论0 收藏0
虚拟DOM

摘要：什么是虚拟举例说明如果网页中有一个表格，表头是姓名，年级，分数。即我们用虚拟的结构替换需要处理的结构，对虚拟的进行操作之后再进行渲染，就成为了真实的数据。当状态变更的时候用修改后的新渲染的的对象和旧的虚拟对象作对比，记录着两棵树的差异。虚拟DOM 可以看看这个文章如何理解虚拟DOM？ - 戴嘉华的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

alin 2019-08-02 11:37 评论0 收藏0
react虚拟dom机制与diff算法

摘要：的一个突出特点是拥有极速地渲染性能。该功能依靠的就是研发团队弄出的虚拟机制以及其独特的算法。在的算法下，在同一位置对比前后节点只要发现不同，就会删除操作前的节点包括其子节点，替换为操作后的节点。 React的一个突出特点是拥有极速地渲染性能。该功能依靠的就是facebook研发团队弄出的虚拟dom机制以及其独特的diff算法。下面简单解释一下react虚拟dom机制和diff算法的实现...

jzman 2019-08-21 11:53 评论0 收藏0
什么是虚拟DOM？

摘要：虚拟之上延伸了什么概念由于是虚拟，延伸了的是声明式的，我们不需要具体操作。虚拟没有解决什么问题目前自己了解的，虚拟无非是对象的表示。参考链接官网怎么写你自己的虚拟虚拟DOM的内涵和外延？内涵虚拟DOM它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。描述HTML标签，使...

hosition 2019-08-26 13:51 评论0 收藏0
虚拟Dom详解 - (二)

摘要：第一篇文章中主要讲解了虚拟基本实现，简单的回顾一下，虚拟是使用数据描述的一段虚拟节点树，通过函数生成其真实节点。并添加到其对应的元素容器中。在创建真实节点的同时并为其注册事件并添加一些附属属性。第一篇文章中主要讲解了虚拟DOM基本实现，简单的回顾一下，虚拟DOM是使用json数据描述的一段虚拟Node节点树，通过render函数生成其真实DOM节点。并添加到其对应的元素容器中。在创建...

sevi_stuo 2019-08-26 10:46 评论0 收藏0