在react项目中总会遇到这样一个的坑这是警告数组遍历子元素要有一个唯一的key值，但是key
在react项目中总会遇到这样一个的坑
这是警告数组遍历子元素要有一个唯一的key值，但是key到底是什么，在代码中到底起了什么作用？
key概述
react中的key属性，它是一个特殊的属性，它的出现不是给开发者用的（例如你为一个组件设置key之后，也仍无法获取这个组件的key值），而是给react自己用的。
简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。
key的使用场景
在项目开发中，key属性的使用场景最多的还是由数组动态创建的子组件的情况，需要为每个子组件添加唯一的key属性值。那会有的人就会自然而然想到，key和动态渲染的子元素获取的index位置的值很接近，那不是可以直接用index附上key的值呢key={index}?
例如：
{dataList.map((item,index)=>{
return <div style={mystyle} key={index}>{item.name}</div>
})
}在你尝试过后会发现，报错没了，渲染也没问题不是很正常嘛？！但是强烈不推荐用数组index来作为key。 如果数据更新仅仅是数组重新排序或在其中间位置插入新元素，那么视图元素都将重新渲染。
例如：
本来index=2的元素向前移动后，那该元素的key不也同样发生了改变那这样会改变的Key就没有任何的存在意义，既然是作为“身份证”一样的存在，那就不容有失。当然，在你用key值创建子组件的时候，若数组的内容只是作为纯展示，而不涉及到数组的动态变更，其实是可以使用index作为key的。
key的值必须保证唯一且稳定
我在与Key值打过几次交道过后，觉得key值就类似于数据库中的主键id一样，有且唯一。
//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
....//省略
}
render()
return(
<div>
<h3>用户列表</h3>
{this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
</div>
)
);注意以上范例中，动态渲染的数据中，key以数据的id来定，而李四、王五的id相同而导致Key的雷同，最后的渲染结果为张三和李四，王五并没有展示出来。主要是因为 react根据key认为李四和王五是同一个组件（李四和王五的key值相同），导致第一个被渲染，后续的会被丢弃掉。
这样，有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。
并且，Key也要保证值的稳定性，例如：
{dataList.map((item,index)=>{
return <div style={mystyle} key={Math.random()}>{item.name}</div>
})
}尤其如以上范例中所示，key的值以Math.random()随机生成而定，这使得数组元素中的每项都重新销毁然后重新创建，有一定的性能开销；另外可能导致一些意想不到的问题出现。
所以，Key的值必须保证其唯一和稳定性
所以，在不能使用random随机生成key时，我们可以像下面这样用一个全局的localCounter变量来添加稳定唯一的key值。
var localCounter = 1;
this.data.forEach(el=>{
el.id = localCounter++;
});
//向数组中动态添加元素时，
function createUser(user) {
return {
...user,
id: localCounter++
}
}
key其它注意事项
当然除了为数据元素生成的组件要添加key，且key要稳定且唯一之外，还需要注意以下几点：
key属性是添加到自定义的子组件上，而不是子组件内部的顶层的组件上。
//MyComponent
...
render() {//error
<div key={{item.key}}>{{item.name}}</div>
}
...
//right
<MyComponent key={{item.key}}/>
key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一
不仅仅在数组生成组件上，其他地方也可以使用key，主要是react利用key来区分组件的，相同的key表示同一个组件，react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例，重新创建组件新的实例。
{
this.state.type ?
<div><Son_1/><Son_2/></div>
: <div><Son_2/><Son_1/></div>
}
例如上面代码中，this.state.type的值改变时，原Son_1和Son2组件的实例都将会被销毁，并重新创建Son_1和Son_2组件新的实例，不能继承原来的状态，其实他们只是互换了位置。为了避免这种问题，我们可以给组件加上key。
{
this.state.type ?
<div><Son_1 key="1"/><Son_2 key="2"/></div>
: <div><Son_2 key="2" /><Son_1 key="1"/></div>
}
这样，this.state.type的值改变时，Son_1和Son2组件的实例没有重新创建，react只是将他们互换位置。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
React key值