概覽
文章內(nèi)容選自極客時(shí)間 ebay 技術(shù)專家王沛的《 React 實(shí)戰(zhàn)進(jìn)階》第 5 講，本文的主題是 理解 Virtual DOM 及 key 屬性的作用。
小結(jié)
1 算法復(fù)雜度為 O(n)；
2 虛擬 DOM 如何計(jì)算 diff；
2 key 屬性的作用。
內(nèi)容
1 Virtual DOM 與 React 組件的聯(lián)系：
JSX 的運(yùn)行基礎(chǔ)
2 diff 時(shí)機(jī)
調(diào)用 render() 產(chǎn)生新的 Virtual DOM 后
3 diff 的原理
策略：廣度優(yōu)先分層比較 ，從 根節(jié)點(diǎn) 開始，
diff 處理：不同的變化，不同的處理
（1）屬性變化及順序
如圖：
image.png
處理：借助標(biāo)識(shí)（key）,交換順序
（2）節(jié)點(diǎn)類型
如圖：
image.png
處理：直接刪除原有節(jié)點(diǎn)，創(chuàng)建新節(jié)點(diǎn)，不管舊節(jié)點(diǎn)是否還會(huì)用到
（3）節(jié)點(diǎn)跨層移動(dòng)
如圖：
image.png
處理：在 old 層刪除原有節(jié)點(diǎn)，在 new 層創(chuàng)建新節(jié)點(diǎn)
總結(jié)：刪除節(jié)點(diǎn)時(shí)，不考慮節(jié)點(diǎn)后續(xù)是否會(huì)用到，存在一定的性能問題
原因：UI發(fā)生變化時(shí)，很少發(fā)生節(jié)點(diǎn)的跨層移動(dòng)，一般來說歸結(jié)為：屬性變化、順序變化、類型變化
