React/Vue循环遍历时中的key有什么作用?为什么遍历列表时,key最好不用index

2022-06-28 10:38:55

一、虚拟DOM中key的作用:

1.简单概括:key是虚拟DOM对象的标识,在更新显示时key有很重要的作用
2.具体重要作用:当数据发生改变时,react会根据新数据生成新的虚拟DOM,然后react会进行 新虚拟DOM和 旧虚拟DOM的DIFF比较,规则如下:
1).旧虚拟DOM中找到与新虚拟DOM相同的key之后会进行内容的比较,若内容变了则生成新的真实DOM,替换掉页面中之前的真实DOM,若没有改变,则继续使用原来页面中的真实DOM
2).旧虚拟DOM中没有找到与新虚拟DOM相同的key,根据数据创建新的真实DOM,渲染到页面

二、用index作为key可能会引发的问题:

1.若对数据进行:逆序添加、逆序删除等破坏顺序操作,会产生没必要的真实DOM更新,界面效果虽然正常显示,但是效率低
2.如果结构中还包含输入类的DOM,会产生错误DOM更新,界面显示会出问题

在这里插入图片描述

注意:若不存在对数据逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表,使用index作为key没有问题

三、建议
1.最好用每条数据的唯一标志(如id)作为key
2.如果只是简单的数据展示,用index也是ok的
  • 作者:zxo_apple
  • 原文链接:https://blog.csdn.net/zxo_apple/article/details/116056077
    更新时间:2022-06-28 10:38:55