浅谈react中的diff

前言

• 在vue/react中循环渲染的时候，如果没有添加响应key值/key值不唯一的时候，控制台就会报出警告，接下来让我们一探究竟

vue/react页面的渲染机制 （以react为例）

• 首先，react会将编写的jsx，转换为虚拟DOM（一个js对象，用来标示当前DOMTree结构）
• 新旧虚拟DOM进行比较，这里需要对key值相比较（diff具体的比较下文会讲解），然后将不相等的虚拟DOM替换（新替换旧）
• 最后，将改变的虚拟DOm转换为真实的Dom元素

重点

• 首先，通过react渲染过程，我们知道当节点存在key值的时候，经过一些比较，一些节点是可以复用的，这就大大提高了性能
• 比较规则，大致分为两种key值相等 or key值不相等
• 相不相等在是相对于旧的虚拟DOM比较
  • 相等的情况
    • 虚拟DOM的子节点相等
      • 复用虚拟DOM，不进行节点的二次渲染
    • 虚拟DOM子节点不相等
      • 替换掉不相等的子节点，然后渲染真实的DOM
  • 不相等的情况
    • 新增到旧的虚拟DOM然后渲染成真实的DOM

注意

• 要避免使用index作为key值。如果当一个数组倒序插入的时候，当前的索引都会被打乱，导致新的虚拟DOM的key值和旧的虚拟DOM的key值不能相呼应，所以相当于每次都要重新渲染整个列表，这样就很浪费性能。
• 应该使用整个列表的唯一值，比如：ID，手机号，身份证号等