React中的檢視更新與虛擬DOM
阿新 • • 發佈:2018-12-13
React中的檢視更新過程
- state 資料
- JSX 模板
- 生成虛擬DOM (虛擬DOM就是一個JS物件,他用來描述真實的DOM)
['div', {id: 'abc'}, ['span', {}, 'Hello']]
- 用虛擬DOM的結構,生成真實的DOM
<div id="abc"><span>Hello!</span></div>
- 資料state 發生改變
- 資料 + 模板 生成新的虛擬DOM
['div', {id: 'abc'}, ['span', {}, 'World!']]
- 比較原始虛擬DOM和新虛擬DOM的區別(diff演算法),找到區別是span中的內容
- 操作DOM,只改變span中的內容
VDOM優點:
- 效能得到提升
- 它使得跨端應用( React Native )得以實現。在瀏覽器端是將虛擬DOM轉換為一個個的瀏覽器DOM節點。而如果將他轉換為原生應用的元件,那麼跨端應用就能得到實現。
為什麼使用VDOM極大的提升了效能?
- 虛擬DOM的使用讓頁面只重新生成資料變更的DOM,而不是把整個頁面重新繪製出來。
- 虛擬DOM其實就是JS物件。在比較資料哪裡發生變化的時候效率極高。如果去生成一個真實的DOM樹和已有的DOM樹比較效率是很低的,因為JS生成DOM樹會呼叫web application級的API,這種級別的API效能損耗是很大的。