react diff算法理解

React的Diff算法

當組件更新的時候react會創建一個新的虛擬dom樹並且會和之前存儲的dom樹進行比較,這個比較過程就用到了diff算法,所以組件初始化的時候是用不到的。react提出了一種假設,相同節點具有類似的結構,而不同的節點具有不同的結構。基於這種假設之上進行逐層的比較,如果發現對應的節點是不同的,那就直接刪除舊的節點以及它包含的所有子節點然後替換成新的節點。如果是相同的節點,只需要進行屬性的替換就行

對於列表的diff算法稍有不同,因爲列表通常具有相同的結構,在對列表節點進行刪除、插入、排序的時候,單個節點的整體操作遠比一個個對比和一個個替換要好得多,所以在創建列表的時候需要設置key值,這樣react才能分清楚誰是誰。當然不寫key值也可以,但這樣通常會爆出警告⚠️,通常我們加上key值以提高react的性能

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章