vue中key值與react中key值的區別

2022-07-19 12:54:15 字數 816 閱讀 8817

兩者演算法比較不同

分別對olds、olde、s、e兩兩做samevnode比較,有四種值,舊集合的開頭和結束(olds, olde)新集合的開頭和結束( s e),當其中兩個能匹配上那麼真實dom中的相應節點會移到vnode相應的位置,這句話有點繞,打個比方

大意就是每次比較四個key值,匹配上的就移動,指標向後或者向前移動,都匹配不上,則遍歷舊集合中有沒有s,沒有就新增,有就移動舊集合的s

是將舊的虛擬dom的同一層級的key值節點作為乙個集合(舊的集合)

新的虛擬dom的同一層級的key值節點作為乙個集合(新集合)

比如 舊集合為:

a b c d

新集合為:

b  c  a d

比較方法為:

先遍歷新的集合,判斷有哪一些節點需要新增和刪除;

再判斷節點的移動:

遍歷新的集合;判斷新集合中的節點在舊集合位置是否大於之前訪問過得舊節點的最大位置;

比如以上述兩集合作為例子:

1.新集合的第乙個元素為b,b在舊集合的位置為1(index),之前訪問過得舊節點的最大位置為0,1>0;所以b節點不需要移動

2.新集合的第二個元素為c,在舊集合的位置為2,之前訪問過得舊節點的最大位置為1,2>1,所以c節點不需要移動;

3.新節點第三個元素為a,在舊集合的位置為0(index),之前訪問過得舊節點的最大位置為2,0<2,所以a需要移動;

4,新節點第四個元素為d,在舊集合的位置為3(index),之前訪問過得舊節點的最大位置為2,3>2,所以d不需要移動;

這個就是react的key值節點的比較方法

vue中 key 值的作用

1 index值不是一定不變的,如果不加key值的話,刪除前面的項。後面的index可能變也可能不變,比如加個定時器的時候會變,不加定時器不會變 2 不加key的話,更新機制的進行diff的時候是會全部比較的,比如刪除第乙個的話,後面的元素其實都不一樣,會一項一項的比較。然後全部元素都替換,沒有做到...

React元件中的key

一 key的作用 react中的key屬性,它是乙個特殊的屬性,它是出現不是給開發者用的 例如你為乙個元件設定key之後不能獲取元件的這個key props 而是給react自己用的。簡單來說,react利用key來識別元件,它是一種身份標識標識,就像我們的身份證用來辨識乙個人一樣。每個key對應乙...

react解密 react中key的作用是什麼?

我們知道,不管是在vue還是react中,當迴圈列表的時候,往往會寫乙個key,那麼這個key起到了什麼作用呢?其實,key是react用來追蹤哪些列表的元素被修改,被新增或者是被刪除的輔助標示。在開發過程中我們需要保證某個元素的key在其同級元素中具有唯一性。在react的diff演算法中reac...