成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

虛擬Dom

waruqi / 2128人閱讀

Virtual Dom

vdom 是vue和react的核心

vdom是什么東西，有什么用，為什么會(huì)存在vdom?

vdom如何應(yīng)用，核心API是什么?

diff算法

## 什么是vdom ##

用js模擬DOM結(jié)構(gòu)

DOM變化的對(duì)比，放在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"]  
      }
    ]
 }
設(shè)計(jì)一個(gè)需求場(chǎng)景，渲染一個(gè)數(shù)組成表格 
 //Jquery的實(shí)現(xiàn)
 
    
    
        
        
        
        Document

上述辦法遇到的問題

js原生或者是Jquery框架時(shí)代，都是直接操作DOM節(jié)點(diǎn)來進(jìn)行渲染頁面，可是這樣的代價(jià)確實(shí)是很大，需要將原本的DOM全部清除，然后在重新渲染一遍

操作Dom非常昂貴。每個(gè)Dom自帶了太多的屬性。 js運(yùn)行效率高

盡量減少Dom操作

項(xiàng)目越復(fù)雜，運(yùn)行效率越低，影響越嚴(yán)重

vdom 可以解決這個(gè)問題，將Dom操作方在Js層，提高效率

vdom如何應(yīng)用，核心API

snabbdom
為什么是snabbdom.js
由于虛擬dom有那么多的好處而且現(xiàn)代前端框架中react和vue均不同程度的使用了虛擬dom的技術(shù)，因此通過一個(gè)簡單的 庫賴學(xué)習(xí)虛擬dom技術(shù)就十分必要了，至于為什么會(huì)選擇snabbdom.js這個(gè)庫呢？原因主要有兩個(gè)：

源碼簡短，總體代碼行數(shù)不超過500行。
著名的vue的虛擬dom實(shí)現(xiàn)也是參考了snabbdom.js的實(shí)現(xiàn)。

用snabbdomjs 實(shí)現(xiàn)上述例子




    
    
    
    Document

//修改數(shù)據(jù)只是修改了 第二個(gè)item 第三，第一個(gè)數(shù)據(jù)沒變化（F12查看Element 第一個(gè)item沒有閃爍）

diff算法

什么是diff算法

去繁就簡

vdom 為何用diff算法

diff算法的實(shí)現(xiàn)流程

diff命令是linux系統(tǒng)自帶的基礎(chǔ)命令
git diff 判斷文本文件哪里被修改了
diff算法一直都在，并不是因?yàn)閞eact、vue才出現(xiàn)的

vdom為何使用diff算法

DOM 操作是昂貴的，因此盡量減少DOM操作

找出本次DOM必須更新的節(jié)點(diǎn)來更新，其他的不更新

這個(gè)找出的過程，就需要diff算法

diff實(shí)現(xiàn)過程

只需要明白

path(container,vnode)

path(vnode,newnode)

通過VNode創(chuàng)建一個(gè)真實(shí)的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))
    });
    //返回真實(shí)的Dom
    return elem
}

path(vnode,newVnode) 的實(shí)現(xiàn)，

function updateChildren(vnode,newVnode){
     var children = vnode.children || []
     var newChildren = newVnode.children || []
    
     //遍歷現(xiàn)有的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)
}

不僅僅是以上的內(nèi)容，還有以下的內(nèi)容

節(jié)點(diǎn)新增和刪除

節(jié)點(diǎn)重新排序

節(jié)點(diǎn)屬性、樣式、事件綁定

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103858.html

相關(guān)文章

  • 虛擬Dom詳解 - (一)

    摘要：為此也做了一些學(xué)習(xí)簡單的侃一侃虛擬到底是什么虛擬詳解二什么是虛擬虛擬首次產(chǎn)生是框架最先提出和使用的，其卓越的性能很快得到廣大開發(fā)者的認(rèn)可，繼之后也在其核心引入了虛擬的概念。所謂的虛擬到底是什么也就是通過語言來描述一段代碼。 隨著Vue和React的風(fēng)聲水起，伴隨著諸多框架的成長，虛擬DOM漸漸成了我們經(jīng)常議論和討論的話題。什么是虛擬DOM，虛擬DOM是如何渲染的，那么Vue的虛擬Dom...

    ashe 評(píng)論0 收藏0

  • 虛擬DOM

    摘要：什么是虛擬舉例說明如果網(wǎng)頁中有一個(gè)表格，表頭是姓名，年級(jí)，分?jǐn)?shù)。即我們用虛擬的結(jié)構(gòu)替換需要處理的結(jié)構(gòu)，對(duì)虛擬的進(jìn)行操作之后再進(jìn)行渲染，就成為了真實(shí)的數(shù)據(jù)。當(dāng)狀態(tài)變更的時(shí)候用修改后的新渲染的的對(duì)象和舊的虛擬對(duì)象作對(duì)比，記錄著兩棵樹的差異。 虛擬DOM 可以看看這個(gè)文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    yanwei 評(píng)論0 收藏0

  • 虛擬DOM

    摘要：什么是虛擬舉例說明如果網(wǎng)頁中有一個(gè)表格，表頭是姓名，年級(jí)，分?jǐn)?shù)。即我們用虛擬的結(jié)構(gòu)替換需要處理的結(jié)構(gòu)，對(duì)虛擬的進(jìn)行操作之后再進(jìn)行渲染，就成為了真實(shí)的數(shù)據(jù)。當(dāng)狀態(tài)變更的時(shí)候用修改后的新渲染的的對(duì)象和舊的虛擬對(duì)象作對(duì)比，記錄著兩棵樹的差異。 虛擬DOM 可以看看這個(gè)文章如何理解虛擬DOM？ - 戴嘉華的回答 - 知乎 https://www.zhihu.com/questio... 深度剖...

    alin 評(píng)論0 收藏0

  • react虛擬dom機(jī)制與diff算法

    摘要：的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是研發(fā)團(tuán)隊(duì)弄出的虛擬機(jī)制以及其獨(dú)特的算法。在的算法下，在同一位置對(duì)比前后節(jié)點(diǎn)只要發(fā)現(xiàn)不同，就會(huì)刪除操作前的節(jié)點(diǎn)包括其子節(jié)點(diǎn)，替換為操作后的節(jié)點(diǎn)。 React的一個(gè)突出特點(diǎn)是擁有極速地渲染性能。該功能依靠的就是facebook研發(fā)團(tuán)隊(duì)弄出的虛擬dom機(jī)制以及其獨(dú)特的diff算法。下面簡單解釋一下react虛擬dom機(jī)制和diff算法的實(shí)現(xiàn)...

    jzman 評(píng)論0 收藏0

  • 什么是虛擬DOM？

    摘要：虛擬之上延伸了什么概念由于是虛擬，延伸了的是聲明式的，我們不需要具體操作。虛擬沒有解決什么問題目前自己了解的，虛擬無非是對(duì)象的表示。參考鏈接官網(wǎng)怎么寫你自己的虛擬 虛擬DOM的內(nèi)涵和外延？ 內(nèi)涵 虛擬DOM它是真實(shí)DOM的內(nèi)存表示,一種編程概念，一種模式。它會(huì)和真實(shí)的DOM同步，比如通過ReactDOM這種庫，這個(gè)同步的過程叫做調(diào)和(reconcilation)。 描述HTML標(biāo)簽，使...

    hosition 評(píng)論0 收藏0

  • 虛擬Dom詳解 - (二)

    摘要：第一篇文章中主要講解了虛擬基本實(shí)現(xiàn)，簡單的回顧一下，虛擬是使用數(shù)據(jù)描述的一段虛擬節(jié)點(diǎn)樹，通過函數(shù)生成其真實(shí)節(jié)點(diǎn)。并添加到其對(duì)應(yīng)的元素容器中。在創(chuàng)建真實(shí)節(jié)點(diǎn)的同時(shí)并為其注冊(cè)事件并添加一些附屬屬性。 第一篇文章中主要講解了虛擬DOM基本實(shí)現(xiàn)，簡單的回顧一下，虛擬DOM是使用json數(shù)據(jù)描述的一段虛擬Node節(jié)點(diǎn)樹，通過render函數(shù)生成其真實(shí)DOM節(jié)點(diǎn)。并添加到其對(duì)應(yīng)的元素容器中。在創(chuàng)建...

    sevi_stuo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<