vue/react关与key的面试题

虚拟dom中key的作用

当状态中的数据发生改变时，react会根据新数据生成新的虚拟dom，随后react进行新虚拟dom与旧虚拟dom的diff算法比较，比较规则如下：

1.旧虚拟dom找到了与新虚拟dom相同的key

a.若虚拟dom中的内容没变，则使用之前的真实dom

b.若虚拟dom中的内容发生了改变，则生成新的真实dom，随后替换掉页面之前的真实dom

2.旧虚拟dom没有找到与新虚拟dom相同的key

根据数据创建新的真实dom，渲染到页面

用index作为key可能引发的问题

1.若对数据进行逆序添加删除等破坏顺序操作，会产生没必要的真实dom更新，代码效率低

2.如果结构中包含输入类的dom，会产生错误dom更新，界面有问题

开发中如何选择key

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

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

 --------------------------------------运行结果------------------------------------------------

 可以明显的看到如果使用index作为key时，dom结构中出现了input输入框的节点，diff算法在进行新旧dom的比对时会出现错乱的问题