这篇摘录了 React 文档 的核心思想。

由于 JSX 并不提供一些模板引擎所提供的循环语法（如 Django 的 {% for ... in ... %}），因此你只能在它的 {}（JavaScript expression）中生成一批元素。而 JS 的 for / while 循环等在这里显得不够优雅，因而一般用 array.map()：

class TodoList extends Component {
  render () {
    const { items } = this.props

    return <ul>
      {items.map(item =>
        <TodoItem item={item} key={item.key} />)}
    </ul>
  }
}

需要注意的是，你需要给每个列表元素一个 key。key 需要满足：

• 在元素内容变化时，key 保持不变
  • 例如，元素表示某个 todo 项，那么 todo 的内容、到期时间可能会变，不能当作 key；它的 ID 不变的话，可以当作 key
  • 因此，数组索引并不适合作为 key。如果数据元素的排序变化，会有很大问题
• key 值只要保证在当前列表中唯一即可

为什么有这些限制呢？React 需要这个 key 来辅助它判断需不需要重新生成 / 绘制相应的 DOM 元素。因为 React 程序中最大的性能消耗往往在 DOM 元素的变化上，如果不给 key，对性能影响很大。