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

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

網(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樹中，但是只做了一次DOM操作。然而，在實(shí)際開發(fā)過程中，這1000個(gè)元素更新可能分布在20個(gè)邏輯塊中，每個(gè)邏輯塊中包含50個(gè)元素，當(dāng)頁(yè)面需要更新時(shí)，都會(huì)引起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;
    }
  } 
  ... 
}

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

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

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

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)

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

文章題目：詳解操作虛擬dom模擬react視圖渲染
瀏覽路徑：http://www.chinadenli.net/article44/ieghhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、電子商務(wù)、網(wǎng)站排名、面包屑導(dǎo)航、網(wǎng)頁(yè)設(shè)計(jì)公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)