詳解操作虛擬dom模擬react視圖渲染

更新時間：2018年07月25日 10:38:01 作者：danarrr

這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

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

function Raw() {
  var data = _buildData(),
    html = "";
  ...
  for(var i=0; i<data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
}

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

function Raw() {
  var data = _buildData(), 
    html = ""; 
  ... 
  for(var i=0; i<data.length; i++) { 
    var render = template; 
    render = render.replace("{{className}}", ""); 
    render = render.replace("{{label}}", data[i].label); 
    html += render; 
    if(!(i % 50)) {
      container.innerHTML = html;
    }
  } 
  ... 
}

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

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

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

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

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

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

// 3. 生成新的虛擬DOM
var newTree = el('div', {'id': 'container'}, [
  el('h1', {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元素上應用變更
patch(root, patches)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: