概覽

文章內(nèi)容選自極客時間 ebay 技術(shù)專家王沛的《 React 實戰(zhàn)進階》第 5 講，本文的主題是 理解 Virtual DOM 及 key 屬性的作用。

小結(jié)

1 算法復雜度為 O(n)；
2 虛擬 DOM 如何計算 diff；
2 key 屬性的作用。

內(nèi)容

1 Virtual DOM 與 React 組件的聯(lián)系：

JSX 的運行基礎(chǔ)

2 diff 時機

調(diào)用 render() 產(chǎn)生新的 Virtual DOM 后

3 diff 的原理

策略：廣度優(yōu)先分層比較 ，從 根節(jié)點 開始，
diff 處理：不同的變化，不同的處理

（1）屬性變化及順序
如圖：

image.png

處理：借助標識（key）,交換順序

（2）節(jié)點類型

如圖：

image.png

處理：直接刪除原有節(jié)點，創(chuàng)建新節(jié)點，不管舊節(jié)點是否還會用到

（3）節(jié)點跨層移動

如圖：

image.png

處理：在 old 層刪除原有節(jié)點，在 new 層創(chuàng)建新節(jié)點
總結(jié)：刪除節(jié)點時，不考慮節(jié)點后續(xù)是否會用到，存在一定的性能問題
原因：UI發(fā)生變化時，很少發(fā)生節(jié)點的跨層移動，一般來說歸結(jié)為：屬性變化、順序變化、類型變化