React中绑定的key值

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`