[译]React核心概念7：列表&keys

原文连接：reactjs.org/docs/lists-…

引言

首先让咱们来回顾如下怎么在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()函数中的代码太过复杂，那么就把它提取成组件吧。