虛擬Dom

waruqi 發布于2019-08-23 17:08 / 2119人閱讀

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)
}

不僅僅是以上的內容，還有以下的內容

節點新增和刪除

節點重新排序

節點屬性、樣式、事件綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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