• 1.渲染多个组件
• 2.基本的list组件
• 3.键(Keys)
• 4.利用key分解组件
• 5.key在兄弟中必须是唯一的
• 6.在JSX中嵌入map()

本文译自React官方文档
全文翻译及相关代码，请参看我的Github

首先让我们来回顾一下在JavaScript如何转换列表。
在以下代码段中，我们使用map()函数，为其传入一个numbers数组，将数组的值翻倍并打印出来：

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

这段代码在控制台中会打印出[2, 4, 6, 8, 10]。
在React中，将数组转为元素列表的操作基本类似。

1.渲染多个组件

我们可以建立元素集合并用{}将他们包含在JSX中。
以下代码中，我们使用map()遍历numbers数组，对其中的每个元素，返回一个<li>最后将生成的元素数组赋值给listItems：

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

我们使用<ul>包裹listItems并将其渲染至DOM:

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

在CodePen中尝试。
这段代码显示了一段1~5的列表。

2.基本的list组件

通常我们会将list渲染至某个组件中。
我们可以将之前的例子重构为一个接受一个数组numbers并输出一个无序元素列表的组件。

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

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

执行这段代码时会收到一个警告-对list的各列表项需要提供一个key。key是创建元素列表时需要包含的特殊字符串属性。我们将在下一部分讨论它为什么重要。
为numbers.map()中的列表项分配一个key：

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

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

在CodePen中尝试。

3.键(Keys)

keys用于帮助React识别出具体是哪个item发生了变化，它应该被赋给元素数组中的各元素以作为其标识：

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

选择key的最佳实践是使用能够唯一标识各元素的字符串。大多情况下可以使用数据的ID作为key：

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

数据不一定有id属性时，也可以用item的索引替代：

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

在item可以重新排序的情况下，不建议使用index作为key-这样会很慢。

4.利用key分解组件

key在数组的上下文中才有意义。
例如，要分解一个listItem组件，应该将key保留在数组中的<ListItem />元素上而不是<li>中。
例：错误的使用方式

function ListItem(props) {
  const value = props.value;
  return (
    // Wrong! There is no need to specify the key here:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Wrong! The key should have been specified here:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

正确的使用方式：

function ListItem(props) {
  // Correct! There is no need to specify the key here:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // Correct! Key should be specified inside the array.
    <ListItem key={number.toString()}
              value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

在CodePen中尝试。
这里有一个很好的经验法则-map()调用中的元素需要key

5.key在兄弟中必须是唯一的

数组中使用的key在兄弟中必须是唯一的。但是，他们不需要 全局唯一 。两个不同的数组中的key可以相同：

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
  <Blog posts={posts} />,
  document.getElementById('root')
);

在CodePen中尝试。
key的是供React使用的，但并不会传递给组件。在组件中若需要同样的值，可以取一个不同的名字并将其作为属性显式传递：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

在上例中，Post组件可以读到props.id，但无法读到props.key。

6.在JSX中嵌入map()

上例中声明了一个单独的listItem变量并将其包含在JSX中：

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

JSX允许在{}中嵌入表达式，因此可以内联map()的输出：

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

在CodePen中尝试。
这么做在一些情况下能使代码更清晰，但有时也会造成麻烦。与JavaScript一样，是否需要为可读性提取变量取决于你。
注意，如果map()的嵌套层级过多，也许这说明是时候分解组件了。