react中key的使用

面试题:

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

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

1. 虚拟DOM的key的作用?

   1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用

   2). 详细的说: 当列表数组中的数据发生变化生成新的虚拟DOM后, React进行新旧虚拟DOM的diff比较

   a. key没有变

   item数据没变, 直接使用原来的真实DOM

   item数据变了, 对原来的真实DOM进行数据更新

   b. key变了

   销毁原来的真实DOM, 根据item数据创建新的真实DOM显示(即使item数据没有变)

   1. key为index的问题

      1). 添加/删除/排序 => 产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低

      2). 如果item界面还有输入框 => 产生错误的真实DOM更新 ==> 界面有问题

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

   2. 解决:

      使用item数据的标识数据作为key, 比如id属性值

   3. 什么时候可以用index作为key

      不能有: 添加/删除/排序

      可以有: 更新元素内部的数据