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
})
}
-
{
this.state.movies.map((item, index) => {
return
- {item} }) }
前面的元素在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视频教程》
