1.為什么要使用虛擬dom？

創(chuàng)新互聯(lián)2013年開創(chuàng)至今，先為大慶等服務(wù)建站，大慶等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為大慶企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

網(wǎng)頁性能優(yōu)化->盡量少操作DOM

2..虛擬DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML)

function Raw() {
  var data = _buildData(),
    html = "";
  ...
  for(var i=0; i

以下測試用例中雖然構(gòu)造了一個包含1000個Tag的String，并把它添加到DOM樹中，但是只做了一次DOM操作。然而，在實際開發(fā)過程中，這1000個元素更新可能分布在20個邏輯塊中，每個邏輯塊中包含50個元素，當(dāng)頁面需要更新時，都會引起DOM樹的更新，上述代碼就近似變成了如下格式：

function Raw() {
  var data = _buildData(), 
    html = ""; 
  ... 
  for(var i=0; i

實際場景：實際是一個組件里經(jīng)常包含多個局部視圖，小小的狀態(tài)變更都要重新構(gòu)造整棵 DOM，性價比太低。需要更新頁面較多局部視圖的時候，這樣的做法不可取。

3.MVVM模式和React的模板引擎。

1. MVVM: Model-View-ViewModel MVVM 可以很好的降低我們維護狀態(tài) -> 視圖的復(fù)雜程度（大大減少代碼中的視圖更新邏輯）。MV*模式：只要在模版中聲明視圖組件是和什么狀態(tài)進行綁定的，雙向綁定引擎就會在狀態(tài)更新的時候自動。
2. React渲染視圖原理：React setState之后會將傳入的參數(shù)對象與組件當(dāng)前的狀態(tài)合并,React 會以相對高效的方式根據(jù)新的狀態(tài)構(gòu)建 React 元素樹并且著手重新渲染整個UI界面。React 會自動計算出新的樹與老樹的節(jié)點差異，然后根據(jù)差異對界面進行最小化重渲染。

4.Virtual DOM模擬ReactJS視圖渲染大致邏輯：

// 1. 構(gòu)建虛擬DOM
var tree = el('div', {'id': 'container'}, [
  el('h2', {style: 'color: blue'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li')])
])

// 2. 通過虛擬DOM構(gòu)建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虛擬DOM
var newTree = el('div', {'id': 'container'}, [
  el('h2', {style: 'color: red'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li'), el('li')])
])

// 4. 比較兩棵虛擬DOM樹的不同
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上應(yīng)用變更
patch(root, patches)

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。