7.19 react key

react/vue中的key的作用/内部原理

1. 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用
2. 详细的说: 当列表数组中的数据发生变化生成新的虚拟DOM后, React进行新旧虚拟DOM的diff比较
   a. key没有变
   item数据没变, 直接使用原来的真实DOM
   item数据变了, 对原来的真实DOM进行数据更新
   b. key变了
   销毁原来的真实DOM, 根据item数据创建新的真实DOM显示(即使item数据没有变)

为什么列表的key尽量不要用index

1. 添加/删除/排序 => 产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
2. 如果item界面还有输入框 => 产生错误的真实DOM更新 ==> 界面有问题

注意: 如果不存在添加/删除/排序操作, 用index没有问题

3. 解决:
   使用item数据的标识数据(唯一)作为key, 比如id属性值

4. 什么时候可以用index作为key（不改变数组的默认顺序结构）
   不能有: 添加/删除/排序
   可以有: 更新元素内部的数据