2.4　列表和Keys

在组件中渲染列表数据是非常常见的场景，例如，BBS项目PostList组件就需要根据列表数据posts进行渲染：

下面运行BBS项目，然后打开Chrome浏览器的控制台，可以看到如图2-5所示的警告信息。

图2-5

警告信息提示我们，应该为列表中的每个元素添加一个名为key的属性。那么这个属性有什么作用呢？原来，React使用key属性来标记列表中的每个元素，当列表数据发生变化时，React就可以通过key知道哪些元素发生了变化，从而只重新渲染发生变化的元素，提高渲染效率。

一般使用列表数据的ID作为key值，例如可以使用帖子的ID作为每一个PostItem的key：

再次运行程序，你会发现之前的警告消息已经不存在了。本节项目源代码的目录为/chapter-02/bbs-components-keys。

如果列表包含的元素没有ID，也可以使用元素在列表中的位置索引作为key值，例如：

但并不推荐使用索引作为key，因为一旦列表中的数据发生重排，数据的索引也会发生变化，不利于React的渲染优化。我们还会在第5章中详细说明这一情况。

虽然列表元素的key不能重复，但这个唯一性仅限于在当前列表中，而不是全局唯一。例如在一个组件中两次使用post.id作为列表数据的key：