react中可以使用index作为key值吗?
答案当然是可以的,但是可能会有问题,举个例子:
export default function Home(props) {
const [arr, setArr] = useState([1, 2, 3])
const onClick = () => {
arr.splice(1, 1)
setArr([...arr])
}
return (
<div>
{
arr.map((dt, index) => {
return (
<div key={index}>{dt}<input /></div>
)
})
}
<Button onClick={onClick}>点我</Button>
</div>
)
}
上面的代码在页面中渲染出来之后,并在input里手动输入1,2,3;效果如下:
当我点击 点我的按钮之后,删除 arr 第二个元素,会变成如下的效果 ,这时候问题就显现 出来了,所以我们最好不要使用下标绑定key值
那使用Math.random()可以吗?不可以,因为每次页面刷新,都会生成不同的 key 值,浪费性能
那使用时间戳呢?我们要知道,页面渲染的速度是很快的,可能1毫秒就会有很多个结点渲染完成了,key值不能唯一,所以也是不可以的,那使用什么作为key值最合适呢?
数据添加唯一的 id 字段
总结
1. 用组件唯一的 `id`(一般由后端返回)作为它的 `key`,实在没有的情况下,可以在获取到列表的时候通过某种规则为它们创建一个 `key`,并保证这个 `key` 在组件整个生命周期中都保持稳定。
2. 别用 `index` 作为 `key`,和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 `0, 1, 2` 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作。
3. 千万别用随机数作为 `key`,不然旧节点会被全部删掉,新节点重新创建。
4. 不要用时间戳作为 `key`