盡量少操作DOM 2..虛擬DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML) function Raw() { var data = _buildData..."/>
溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-10-12 17:27:03 來源：腳本之家 閱讀：184 作者：danarrr 欄目：web開發(fā)

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的模板引擎。

  1. MVVM: Model-View-ViewModel MVVM 可以很好的降低我們維護狀態(tài) -> 視圖的復雜程度（大大減少代碼中的視圖更新邏輯）。MV*模式：只要在模版中聲明視圖組件是和什么狀態(tài)進行綁定的，雙向綁定引擎就會在狀態(tài)更新的時候自動。
  2. 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('h2', {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('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元素上應用變更
patch(root, patches)

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

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手