對比react和vue的diff算法

最近從vue使用轉到react使用，

以前研究過vue的diff算法，閒來看了看react的diff源碼，寫一點本身的看法

1.vue的diff算法

diff算法發生在虛擬dom上

判斷是否同一個節點：selector和key都要同樣

diff規則：

1. 只比較同層的節點，不一樣層不作比較。刪除原節點，而且新建插入更新節點（實際開發中不多遇到）
2. 新舊節點是同層節點，但不是同一個節點，不作精細化比較。刪除原節點，而且新建插入更新節點（實際開發中不多遇到）
3. 新舊節點是同層節點，也是同一個節點，須要作精細化比較

diff的精細化比較策略

1. 新的頭部子節點，舊的頭部子節點
2. 新的尾部子節點，舊的尾部子節點
3. 新的尾部子節點，舊的頭部子節點
4. 新的頭部子節點，舊的尾部子節點

若是條件1知足，新舊節點頭部指針日後移。

若是條件2知足，新舊節點尾部指針往前移。判斷是否新的子節點先循環完（頭尾位置指針判斷），是：就是刪除了節點，否：新增了節點，新增的節點按照條件4添加

若是條件3知足，須要移動新的頭部子節點到舊的尾部子節點後面

若是條件4知足，須要移動新的頭部子節點到舊的頭部子節點前面

若是4種都未匹配到，而且指針條件未知足，須要loop匹配

vue在把被移動的節點和匹配的節點設置爲undefined

2.react的diff算法

從左往右依次對比，利用元素的index和標識lastIndex進行比較，若是知足index < lastIndex就移動元素，刪除和添加則各自按照規則調整

跨層不比較，同層比較，跟vue同樣

diff策略

新節點的位置是lastIndex，舊節點的位置是index。重新的節點中依次讀取節點索引，對比舊的節點數據索引

1. 不知足 index < lastIndex 的條件，不移動；知足 index < lastIndex 的條件，移動節點。
2. 每一次比較都須要從新設置 lastIndex=(index,lastIndex)中的較大數
3. 移動的節點在前一個被操做的節點後面
4. 若是重新的節點集合獲取的節點在舊節點集合未找到，就是新增，lastIndex爲上一次的值不變
5. 若是新的節點集合遍歷完了，舊節點還有值就是刪除，loop刪除掉就行

最噁心的狀況：若是把最後一個元素移到最前面，react會依次移動節點向後

3.對比

類似的地方：vue和react的diff算法，都是不進行跨層級比較，只作同級比較。

不一樣點：

1. vue會在patch函數中給被操做的節點打補丁（undefined），在diff的時候更清晰
2. vue對比節點，當節點元素類型相同，可是className不一樣時，認爲是不一樣類型的元素，刪除從新建立；而react則認爲是同類型節點，進行修改操做
3. diff策略，vue的性能優於react