詳解操作虛擬dom模擬react視圖渲染
1.為什么要使用虛擬dom？
網(wǎng)頁性能優(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;
...
}
以下測試用例中雖然構(gòu)造了一個(gè)包含1000個(gè)Tag的String，并把它添加到DOM樹中，但是只做了一次DOM操作。然而，在實(shí)際開發(fā)過程中，這1000個(gè)元素更新可能分布在20個(gè)邏輯塊中，每個(gè)邏輯塊中包含50個(gè)元素，當(dāng)頁面需要更新時(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í)際場景：實(shí)際是一個(gè)組件里經(jīng)常包含多個(gè)局部視圖，小小的狀態(tài)變更都要重新構(gòu)造整棵 DOM，性價(jià)比太低。需要更新頁面較多局部視圖的時(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 元素樹并且著手重新渲染整個(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('h1', {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('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元素上應(yīng)用變更
patch(root, patches)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
渲染真實(shí)DOM的開銷很大，有時(shí)候我們修改了某個(gè)數(shù)據(jù)，直接渲染到真實(shí)dom上會(huì)引起整個(gè)dom樹的重繪和重排。我們希望只更新我們修改的那一小塊dom，而不是整個(gè)dom，diff算法就幫我們實(shí)現(xiàn)了這點(diǎn)。diff算法的本質(zhì)就是：找出兩個(gè)對(duì)象之間的差異，目的是盡可能做到節(jié)點(diǎn)復(fù)用2022-11-11
React動(dòng)態(tài)更改html標(biāo)簽的實(shí)現(xiàn)方式
這篇文章主要介紹了React動(dòng)態(tài)更改html標(biāo)簽的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
前端進(jìn)行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對(duì)文件進(jìn)行分片，用數(shù)組將每一個(gè)分片存起來，最后將分片發(fā)給后端，本文給大家介紹React大文件分片上傳方案，感興趣的朋友跟隨小編一起看看吧2023-08-08
react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能
這篇文章主要介紹了react實(shí)現(xiàn)antd線上主題動(dòng)態(tài)切換功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
React Hook - 自定義Hook的基本使用和案例講解
自定義Hook本質(zhì)上只是一種函數(shù)代碼邏輯的抽取，嚴(yán)格意義上來說，它本身并不算React的特性，這篇文章主要介紹了React類組件和函數(shù)組件對(duì)比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11
JavaScript的React Web庫的理念剖析及基礎(chǔ)上手指南
這篇文章主要介紹了JavaScript的React Web庫的理念剖析及基礎(chǔ)上手指南,React Web的目的即是把本地的React Native應(yīng)用程序項(xiàng)目變?yōu)閃eb應(yīng)用程序,需要的朋友可以參考下2016-05-05
react-router-dom入門使用教程(前端路由原理)
這篇文章主要介紹了react-router-dom入門使用教程,主要包括react路由相關(guān)理解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于react-router中<Link/>屬性的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-06-06
React+Ant Design開發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟
這篇文章主要介紹了React+Ant Design開發(fā)環(huán)境搭建的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題
這篇文章主要介紹了react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11