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

網頁性能優化->盡量少操作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操作。然而，在實際開發過程中，這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;    }  }   ... }

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

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

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

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

// 1. 構建虛擬DOMvar tree = el('div', {'id': 'container'}, [  el('h1', {style: 'color: blue'}, ['simple virtal dom']),  el('p', ['Hello, virtual-dom']),  el('ul', [el('li')])])// 2. 通過虛擬DOM構建真正的DOMvar root = tree.render()document.body.appendChild(root)// 3. 生成新的虛擬DOMvar 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)

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