引言

可能的原因是以前學(xué)習(xí)框架的時(shí)候只學(xué)語法和原理不明白，被問到使用框架有什么好處也回答不上來，正是因?yàn)檫@種情況，所以今天要來探討一下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é)點(diǎn)向下延伸，下面依附了很多節(jié)點(diǎn)

引用MDN的圖紙

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

• 重繪

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

• 回流

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

很簡(jiǎn)單，這是一個(gè)很正常的運(yùn)行原因，它是一個(gè)非常重要的播放器就可以只更新需要異動(dòng)的部分。

Virtual DOM的流程

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

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

3、Virtual DOM 先用的演算法（diff算出實(shí)際的部分，比對(duì)之后的不同，再動(dòng)真實(shí)的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模擬出來的物件，會(huì)以下面的格式儲(chǔ)存起來

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

簡(jiǎn)單模擬一下虛擬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變動(dòng)時(shí) Virtual DOM進(jìn)行對(duì)比 再將差異patch到真實(shí)的DOM

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

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

關(guān)于diff算法

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

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

1、Virtual DOM比較相同層級(jí)的節(jié)點(diǎn)

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

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

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

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

最新評(píng)論