React 学习笔记 —— DOM 的 diffing 算法理解

Diff 时 key 的作用

• key 用来作为唯一标识，便于 newVDOM 跟 oldVDOM 进行比较
• key 相同的 VDOM 会进行比较，如果内容相同，直接复用真实DOM
• key 相同的 VDOM 比较时，如果内容不同，则会重新创建真实DOM
• 如果没有找到相同的key，则直接创建真实DOM
  

使用 index 作为 key 的副作用

• 性能问题 ：

• 当对数组进行逆序插入、删除等破坏index跟item之间的对应关系的操作时，会产生没有必要的真实DOM更新

• 因为 index 错位，导致 key 相同的节点，并不是同样的内容，总是重新创建真实DOM, 使得可以复用的节点没有复用
  

• 显示问题：

• 当结构中包含输入类DOM，例如 <input type="text"/>，虽然在标签上，看不出异同，但是在页面中，可能包含不同的内容(value)，如果index错位，可能导致 input 的错位复用，使得页面显示出现bug
  

注意

• key 相同，只是告诉 React，这二者之间需要进行比较，而不是告诉React这二者相同
• 在某些时候，使用 index 作为 key 是没问题的，但尽量使用 id 等作为key，更为稳妥