react的key值（vue同理）

相信很多面试前端的小伙伴都会遇到面试官问这样的问题：react或者vue的key值有什么作用？为什么最好不用index作为key值？今天就简单聊聊这些问题！

key值有什么作用？

简单说：
key是虚拟DOM的对象的标识。在更新显示时key起及其重要的作用。
详细的说：
当状态发生变化，react会根据新数据生成新的虚拟DOM，随后react进行新的虚拟DOM与就旧的虚拟DOM进行DIFF比较。

情况一. 旧的虚拟DOM中找到与新虚拟DOM中相同的key值。
（1）若虚拟DOM中内容没有发生改变，则直接使用真实DOM.
（2）若虚拟DOM内容发生改变，则生成新的虚拟DOM，随后替换掉页面之中的真实情况二.旧的虚拟DOM未找到新的虚拟DOM的key值。
根据数据创建新的真实的DOM，渲染到页面。

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

1.若对数据进行逆序操作，添加删除等破坏顺序的操作，会产生没必要的真实DOM更新，最然不会引发界面问题，但是效率很低。
2.如果结构中包含输入类的DOM，如input，会产生错误的DOM更新，界面出现问题。
3.注意！如果不存在对数据的逆序操作或不包含输入框结构，仅仅用于页面渲染展示，使用index作为key一点问题没有。

开发如何选择？

1.最好使用每条数据的唯一标识作为key值，比如id，手机号等
2.如果仅仅用于简单展示，使用index没有一点问题。