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)次。实际开发中,尽量避免列表尾部元素直接移动到首部的更新操作,在列表数据很庞大时,直接影响组件性能。

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