react的key有什么用

react中key的作用是：在diff算法中判断元素是最新创建的还是被移动来的，从而减少不必要的diff，也就是为了提高diff同级比较的效率，避免原地复用带来的副作用；key是react用来追踪列表的元素被修改，被添加或者是被删除的标识。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react的key有什么用

作用

跟Vue一样，React 也存在diff算法，而元素key属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的Diff

在react的diff算法中react会借助元素的key来判断该元素是最新创建的还是被移动而来的，从而减少不必要的元素渲染。除此之外，react还要根据key来判断元素与本地状态的关联关系

简单的来说就是为了提高diff的同级比较的效率，避免原地复用带来的副作用，

vue和react本身都是采用diff的算法vue采用的是更为细粒的更新组件方式，即是给每一个属性绑定监听，

react采用的是自顶而下的更新策略，每次小的改动都会生成一个全新的的vdom，从而进行diff，如果不写key，就会发生本来应该更新却没有更新

key是什么

key是react用来追踪哪些列表的元素被修改，被添加或者是被删除的辅助标示。在开发过程中我们需要保证某个元素的key在其同级元素中具有唯一性。

如果列表数据渲染中，在数据后面插入一条数据，key作用并不大，如下：

this.state = {
    numbers:[111,222,333]
}
 
insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}
 
<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

前面的元素在diff算法中，前面的元素由于是完全相同的，并不会产生删除创建操作，在最后一个比较的时候，则需要插入到新的DOM树中

因此，在这种情况下，元素有无key属性意义并不大

下面再来看看在前面插入数据时，使用key与不使用key的区别：

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

当拥有key的时候，react根据key属性匹配原有树上的子元素以及最新树上的子元素，像上述情况只需要将000元素插入到最前面位置

当没有key的时候，所有的li标签都需要进行修改

同样，并不是拥有key值代表性能越高，如果说只是文本内容改变了，不写key反而性能和效率更高

主要是因为不写key是将所有的文本内容替换一下，节点不会发生变化

而写key则涉及到了节点的增和删，发现旧key不存在了，则将其删除，新key在之前没有，则插入，这就增加性能的开销

总结

良好使用key属性是性能优化的非常关键的一步，注意事项为：

key 应该是唯一的

key不要使用随机值（随机数在下一次 render 时，会重新生成一个数字）

避免使用 index 作为 key

react判断key的流程具体如下图：

推荐学习：《react视频教程》