React组件中的key

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、key的作用

react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。

简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。例如下面代码：

//this.state.users内容
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>
)
);

上面代码在dom渲染挂载后，用户列表只有张三和李四两个用户，王五并没有展示处理，主要是因为react根据key认为李四和王五是同一个组件，导致第一个被渲染，后续的会被丢弃掉。

这样，有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。

1) key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。

2) key值不同，则react先销毁该组件(有状态组件的componentWillUnmount会执行)，然后重新创建该组件。

3) setState：谁用到了所更新的state，就会刷新该组件，render也并不是所有都会变化，只变state改变的部分。

另外需要指明的是:

key不是用来提升react的性能的，不过用好key对性能是有帮组的。

应该知道React使用virtual dom来比较UI状态的变化，如果DOM中的某一节点更新时重新渲染，一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题，简单来说，例如你有一个List：

<li>Orange</li> <li>Banana</li>

如果想更新成

<li>Apple</li> <li>Orange</li>

那dom比较算法就可以有多种选择，例如销毁两个，生成两个新的代替，或者销毁banana，在orange前插入apple等等，当list多的时候情况就比较复杂，所以React为了使得Dom比较算法最快，需要你提供给每一个list元素一个特殊的key，这样就容易比较前后两个大型的List了，帮助React如何移动、替代、销毁、插入节点，例如：

let List = this.props.fruits.map((fruit) => {
return <FruitList key={fruit.id} name={fruit.name}/>
});return (<div>{List}</div>)

二、注意

1、key是React中使用的一种特殊的属性（除此之外还有ref属性）。当元素被创建的时候，React会将元素的key值和对应元素绑定存储起来。
2、尽管key看起来像是props的一部分，可是事实上我们无法通过this.props.key获取到key的值。React会在判断元素更新的时候自动使用key，而组件自己是无法获取到key的
3、当一个列表被重新渲染时，React会根据较新的元素内容依据相应的key值来匹配之前的元素内容。
4、当一个新的key值添加到列表中时，表示有一个组件被创建；被删除时表示有一个组件被销毁。
5、Key值可以让React明确标识每个组件，这样在重新渲染的时候保有对应的状态数据。
6、如果你去改变某个组件的key值的话，它会在下次渲染的时候被销毁并当作新的组件重新渲染进来