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这个特殊的属性。

上一篇:StringBuffer类和String类(原文地址 : http://www.cnblogs.com/springcsc/archive/2009/12/03/1616330.html)


下一篇:Android startActivities()的使用