React diff 算法 & Virtual DOM

將Virtual DOM(虛擬Dom)樹轉換成Actual DOM(真實Dom)樹的最少操作的過程,叫作調和。diff算法是調和的具體實現,將O(n^3)複雜度 轉化爲 O(n)複雜度。
diff算法原則:

  • 分層同級比較,不跨層比較;
  • 相同的組件生成的DOM結構類似;
  • 分組內的同級節點通過唯一的id進行區分(key)
不同類型節點比較

逐層比較,不同類型節點直接替換,組件經歷unmount,mount

同類型,不同屬性節點比較

同類型節點一般會出現以下幾種形式更新:

  1. 插入新的同級節點
  2. 刪除同級節點
  3. 同級節點交換位置
  4. 更新節點屬性

節點移動規則:index>lastIndex時,max(index,lastIndex)進行移動。index表示元素在舊樹中的同級標記位置,lastIndex表示新樹當前遍歷元素。若在舊樹種找不到節點,則直接插入;遍歷完成後,查找新樹中存在,且在舊樹中不存在的節點進行刪除。所以同級節點添加唯一的key進行區分至關重要,直接決定react組件的性能

diff算法需要改進的地方:列表尾部節點移動到列表首部時,需要移動元素(list.length-1)次。實際開發中,儘量避免列表尾部元素直接移動到首部的更新操作,在列表數據很龐大時,直接影響組件性能。

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