引言

可能的原因是以前學(xué)習(xí)框架的時候只學(xué)語法和原理不明白，被問到使用框架有什么好處也回答不上來，正是因為這種情況，所以今天要來探討一下Virtual DOM的作用原理。

在了解Virtual DOM之前什么是DOM吧！

DOM是什么？

文件模型（Document Object Model,DOM） HTML、XML 和 SVG 文件的程序介面。它提供了文件（樹）的程序的文件表示方法，并定義了訪問并改變文件架構(gòu)、風(fēng)格和內(nèi)容的方法。（摘取自MDN的部分說明）

由下圖可以知道DOM是樹狀結(jié)構(gòu)從文檔根結(jié)點向下延伸，下面依附了很多節(jié)點

引用MDN的圖紙

我們經(jīng)常利用js來操作DOM更新瀏覽器在更新觸發(fā)畫面的重新聲明，當(dāng)回流時間以及回流（重）這兩個更新機(jī)制。

• 重繪

畫面元素更換樣式的時候就觸發(fā)（background-color、color…）

• 回流

更改畫面的操作結(jié)構(gòu)（結(jié)構(gòu)排列）觸發(fā)（更改視窗大小，css屬性：position、width、height…）

很簡單，這是一個很正常的運行原因，它是一個非常重要的播放器就可以只更新需要異動的部分。

Virtual DOM的流程

1、什么東西使用setState()方法的時候，React 會先復(fù)制一個dom（即為Virtual DOM ）

2、的改變時，會比對先前的虛擬 DOM 和當(dāng)前的虛擬 DOM 區(qū)別，當(dāng)重新行動組件的不同狀態(tài)

3、Virtual DOM 先用的演算法（diff算出實際的部分，比對之后的不同，再動真實的DOM，有效減少自己的出現(xiàn)），去提高需要更新的效果。

一般這是的html結(jié)構(gòu)

<div id="header">   
  <h1 class="title">蘋果</h1> 
  <p class="content">檸檬</p> 
</div>

這是Virtual DOM的結(jié)構(gòu)，是JavaScript模擬出來的物件，會以下面的格式儲存起來

{
    tag: "div",
    props: {
        id: "header"
    },
    children: [
        {
            tag: "h1",
            props: { className: "title" },
            children: ["Apple"]
        }, {
            tag: "p",
            props: { className: "content" },
            children: ["lemon"]
        }
    ]
}

簡單模擬一下虛擬dom的流程

1、createELement :先使用Virtual DOM提供的createELement方法來生成真是DOM

var count = 0;
var tree = render(count);
var rootNode = createElement(tree);
document.body.appendChild(rootNode);

2、當(dāng)count變動時 Virtual DOM進(jìn)行對比 再將差異patch到真實的DOM

count++
var newTree = render(count);
var patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;

什么是patch？patch指的是在原有的DOM結(jié)構(gòu)上做異動

關(guān)于diff算法

圖片來源https://www.cronj.com/blog/di...

傳統(tǒng)的diff演算法復(fù)雜度為O(n³) 處理100個節(jié)點對100萬次的比值，Virtual DOM的diff演算算法為O(n)與傳統(tǒng)的差異化預(yù)測下：

1、Virtual DOM比較相同層級的節(jié)點

2、同一層的同一節(jié)點再次出現(xiàn)一個唯一的關(guān)鍵，就是避免移動被再次創(chuàng)建。

3、如果發(fā)現(xiàn)不見了其子節(jié)點也會一并消除，不會再做比對 開發(fā)者只要在數(shù)據(jù)邏輯上運行一次更新機(jī)制全部自動處理。

關(guān)于diff算法的詳細(xì)理解，可以持續(xù)關(guān)注更新。

以上就是React Virtual DOM前端框架全面分析的詳細(xì)內(nèi)容，更多關(guān)于React Virtual DOM前端框架的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論