React 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来定，而李4、王五的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的值必须保证其惟一和稳定性