react dom diff

什么是 dom diff

dom diff 指的是两个虚拟 dom 之间的差异点。使用 dom diff（而不是完整的新 dom） 来更新真实 dom，可以提高性能。

dom diff 算法

react 会通过下面方法算出 dom diff：

首先对比根元素：

• 根元素类型不同时，根节点及子组件会被销毁重建

• 根元素属性不同时，会保留根节点仅更新根节点属性

  • 然后循环对比子元素
    • 当子元素没有 key 属性时时，react 会将相同位置的子元素进行对比。新增子元素时，将新增子元素追加到结尾，要比插入到头部性能更好。
    • 当子元素有 key 属性时，react 会将 key 相同的子元素进行对比，进而避免由插入位置带来的性能问题。
      • key 值在列表中应该具有稳定、可预测、唯一的特质。否则会导致组件产生不必要的重建
      • 当数组下标作为 key 时，如果数组重新排序，组件的 state 可能会产生一些无法预期的问题

参考链接：https://zh-hans.reactjs.org/docs/reconciliation.html