快捷導(dǎo)航

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

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

這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

網(wǎng)頁(yè)性能優(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;
  ...
}

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

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;
    }
  } 
  ... 
}

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

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

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

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

// 1. 構(gòu)建虛擬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. 通過(guò)虛擬DOM構(gòu)建真正的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樹(shù)的不同
var patches = diff(tree, newTree)

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: