React核心概念：列表&keys

上一节：条件渲染
下一节：表单

引言

首先让我们来回顾以下怎么在JavaScript中转换列表。

在下面的代码中，我们使用map()函数让数组中的每一个数字乘2。在这之后我们将通过map()返回的新数组赋值给doubled并将其打印出来：

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

打印出来的是[2, 4, 6, 8, 10]。

在React中，将数组转换成列表与此是几乎相同的。

渲染多个组件

你可以使用{}在JSX内构建一个元素集合。

在下面的例子中我们通过map()函数遍历numbers，把每一个元素添加到<li>中，并将返回的结果数组赋值给listItems。

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

之后我们将整个listItems包裹在<ul>中，并将它渲染到DOM上。

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

上述代码在页面上展示了1到5的数字列表。

基础列表组件

通常我们需要在组件中渲染列表。

我们可以把上面的代码重构成一个接收数组并输出元素列表的组件。

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')
);

但是当你运行这段代码时会看到一个警告信息a key should be provided for list items。意思是需要在创建列表时为每一个元素添加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')
);

keys

keys使得React能够确认哪一个元素被修改，增加或者删除了。因此应该赋予数组中每一个元素一个稳定的标志。

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时，不到万不得已，你不能使用数组的下标作为key：

const todoItems = todos.map((todo, index) =>
  // 只有没有确定的id时才能这么做
  <li key={index}>
    {todo.text}
  </li>
);

由于数组元素的顺序是可变的，所以我们不推荐使用下标作为key。使用下标作为key可能会导致性能问题甚至还可能引起组件状态问题。可以看看这篇深度解析使用下标作为key的负面影响。如果你不显式地给元素添加key，那么React会默认地为每一个元素添加数组下标作为key。

如果想要更深入地了解key，可以看深度解析key的重要性这篇文章。

用key提取组件

keys只有放在同一数组的上下文中才有意义。

如果你提取了一个ListItem组件，那么你应该把可以放在数组的元素<ListItem />上而不是ListItem组件内部的<li>上。

反例

function ListItem(props) {
  const value = props.value;
  return (
    // 错误！不需要在这里使用key:
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 错误！key应该在这里被声明:
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

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

使用key的正确方式

function ListItem(props) {
  // 正确！这里不需要声明key:
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    // 正确！这里需要声明key.
    <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')
);

一个简单的记忆方法：凡是在map()中的元素都需要key。

Keys在兄弟节点之间必须是唯一的

在数组中使用的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')
);

在React中，key仅仅作为一个提示不会作为prop传递给组件。如果组件需要一个与key相同的值，那么需要另起一个prop显式地传递。

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

在上面的代码中，Post组件可以读取props.id但无法读取props.key。

在JSX中嵌入map()

在上面的例子中，我们单独声明了变量listItems并在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>
  );
}

有时候这样更加简介，但是这种方式也可能会被滥用。就像JavaScript一样，是否提取变量取决于你认为怎样代码的可读性更高。如果map()函数中的代码太过复杂，那么就把它提取成组件吧。
上一节：条件渲染
下一节：表单