React中的Keys

前言

当你在React当中渲染列表项的时候，React会尝试存储对应每个单独项的相关信息，如果你的组件包含state状态数据，那么这些状态数据必须被排序。

当你想要更新这些列表项的时候，React必须知道是哪一项被改变了，这样才能在列表中增删改查项目。

比如说这个例子

<li>1</li>
<li>2</li>

变成下面这个表单

<li>2</li>
<li>3</li>
<li>1</li>

如果凭我们肉眼来看的话，就能看出1变到了后边，新增了一个3。但是React只是电脑里运行的程序，无从知道这些改变。

所以我们要为列表中的每一项添加一个key作为唯一的标识符。标识符必须是唯一的。更普遍的一种情况就是，如果我们

的数据是从数据库获取的话，表单每一项的ID就很适合当作它的key。

<li key={user.id}>{user.name}:{user.taskCount}tasks left</li>

注意

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值的话，它会在下次渲染的时候被销毁并当作新的组件重新渲染进来

强烈建议你在渲染列表项的时候添加key值

key的应用场景

1.在列表中更新（增删查改）列表项的时候，React需要知道到底是哪一个列表项进行了改变

2.在动态创建React元素的时候，而且React元素内包含数量或顺序不确定的子元素时，就需要提供key这个特殊的属性。