虛擬DOM 和 DIFF 算法
在Vue 或 React 中常會聽到虛擬 DOM這名子,但虛擬DOM到底是甚麼?跟我們頁面渲染有甚麼關係呢?基本上是這樣子的:
1.首先會有數據
2.然後有模版(以React 為例)
3.數據+模版 生成虛擬DOM(虛擬DOM就是JS的物件,用來描述真的DOM)。例如像這樣
4.用虛擬DOM結構,生成真實DOM
5.當數據發生變化
6.數據+模版 又生成新的虛擬DOM
7.比較舊的虛擬DOM 和 新的真實虛擬DOM差異
8.更新真實DOM,更新不一樣的地方。
======================================================
虛擬DOM優點
DOM比對變成JS物件比對,性能提升
使得跨端應用實現,可用ReactNative 來寫手機
Diff算法
React 採用同層虛擬DOM算法