React 中的 key有什么作用？为什么遍历列表时，key 最好不要用 index ？

经典面试题：

       1）react中的key有什么作用？(key的内部原型是什么？)

       2）为什么遍历列表时，key最好不要用 index ？

1. 虚拟DOM中 key 的作用：

       1）简单的说：key 是虚拟 DOM 对象的唯一标识，在更新显示时 key 起着极其重要的作用。

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

　　　　a）旧虚拟 DOM 中找到了与新虚拟 DOM 相同的 key:

　　　　　　1）若虚拟 DOM 中内容没变，直接使用之前的真实 DOM

　　　　　　2）若虚拟 DOM 中内容变了，则生成新的真实 DOM，随后替换掉页面中之前的真实 DOM

　　　　b）旧虚拟 DOM 中未找到与新虚拟 DOM 相同的 key

　　　　　　根据数据创建新的真实 DOM，随后渲染到页面

2. 用 index 作为 key 可能会引发的问题：

　　1. 若对数据进行：逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实 DOM 更新 ===> 界面效果没有问题，但效率低

　　2. 如果结构中还包含输入类的 DOM：

　　　　会产生错误的 DOM 更新 ===> 界面有问题。 因为输入类 DOM 的 value值，虚拟 DOM 不会保存，也不会去比较，可能会产生错位。

　　3. 注意： 如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表展示，使用 index 作为 key 是没有问题的。

3. 开发中如何选择 key ？

　　1. 最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值。

　　2.如果确定只是简单的展示数据，用 index 也是可以的。