[譯]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()函數中的代碼太過複雜，那麼就把它提取成組件吧。