引言

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

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

DOM是什么？

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

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

引用MDN的圖紙

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

• 重繪

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

• 回流

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

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

Virtual DOM的流程

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

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

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

一般這是的html結構

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

這是Virtual DOM的結構，是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、當count變動時 Virtual DOM進行對比 再將差異patch到真實的DOM

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

什么是patch？patch指的是在原有的DOM結構上做異動

關于diff算法

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

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

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

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

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

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

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

最新評論