Lists and Keys

我们可以构建元素的集合，并使用大括号 {} 将它们包含在 JSX 中。

下面，我们使用该 map() 函数循环数字数组。我们为每个项目返回一个 <li> 元素。最后，我们将生成的元素数组分配给 listItems：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
 <li>{number}</li>
);

然后，我们将整个 listItems 数组包含在一个 <ul> 元素中，并将其渲染给 DOM：

document.body.content(<ul>{listItems}</ul>);

上面的代码将有效地用于我们使用该 Element.content(vnodes) 函数呈现的静态列表。

但是，如果我们计划使用更新 Element.patch() 列表，则需要向列表项添加键。在这种情况下， patch() 可以有效地执行DOM及其虚拟表示的协调。

选取键的最佳方法是使用字符串，该字符串在其同级中唯一标识列表项。大多数情况下，您会使用数据中的 ID 作为密钥：

const todoItems = todos.map( todo =>
 <li key={todo.id} status={todo.status}>
 {todo.text}
 </li>);

注意：如果项的顺序可能会发生变化，则不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态问题。

Keys Must Only Be Unique Among Siblings

数组中使用的键在其同级中应该是唯一的。但是，它们不需要是全局唯一的。

Embedding map() into JSX expressions

JSX 允许在大括号中嵌入任何表达式，因此我们也可以内联 map() 结果：

function NumberList(props) {
 const numbers = props.numbers;
 return
 <ul>
 { numbers.map((number) => <li key={number.toString()} />) }
 </ul>;
}