diff演算法中的概念
阿新 • • 發佈:2018-12-13
合併多次setState
setState被設計為一個非同步的方法,目的是為了提升React底層的效能。假設我們短時間內連續變更3次state,React就會把這3次setState合併為一次setState,只做一次VDOM的比對,提高了整體的效能。
同級比較
diff演算法會從根節點開始,一層層的向下比較,如果在某一層的某個節點發現不同了,他就會直接替換這個節點下面的所有子樹。
key值的重要性
如果每一個虛擬DOM節點沒有一個key值,他就沒有自己的一個名字。當我們在做新舊虛擬dom的比對時,舊狀態的虛擬節點就與難以與新狀態的虛擬節點之間確立關係。當每一個虛擬節點都有唯一key值時,新舊狀態的虛擬節點很快就能知道誰是誰,這樣就極大的提升了diff演算法的效率。
為什麼不要將陣列的下標作為key值
假如陣列中又3個節點a,b,c。我們使用陣列下標來作為dom的key值。
[a, b, c] // 0:a, 1:b, 2:c
這時刪除b
[a, c] // 0:a, 1:c
原來key值為1對應節點為b, 但現在key=1對應的節點變成了c。這時這個key值就失去了它存在的意義了。 所以,為key值繫結一個穩定的值才是正確的做法