Skip to main content

🥭 diff与key

虚拟DOM中key的作用​

简单的说，key是虚拟DOM对象的标识，在更新显示时key起着极其关键的作用。

详细的说，当状态中的护具发生变化时，React会根据新数据生成新的虚拟DOM，随后React进行新的虚拟DOM与旧的虚拟DOM的diff比较。比较规则如下：

  1. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
  • 若虚拟DOM中内容没变，直接使用之前的真实DOM
  • 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM
  1. 旧虚拟DOM中未找到与新虚拟DOM相同的key：
  • 根据数据创建新的真实DOM，随后渲染到页面

用 index 作为 key 可能会发生的问题​

  1. 若对数据进行逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新。虽然界面效果没有问题，但效率低。
  2. 如果结构中还包含输入类的DOM，会产生错误DOM更新。界面效果会受影响。