1. 渲染多個元件

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

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

2. 基礎列表元件

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 屬性

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

3. key

• 一個元素的 key 最好是這個元素在列表中擁有的一個獨一無二的字串

• 通常，我們使用資料中的 id 來作為元素的 key

• 當元素沒有確定 id 的時候，萬不得已你可以使用元素索引 index 作為 key

如果列表專案的順序可能會變化，不建議使用索引來用作 key 值，因為這樣做會導致效能變差，還可能引起元件狀態的問題

3.1 用 key 提取元件

• 元素的 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')
);
 

• key 只是在兄弟節點之間必須唯一

3.2 key 會傳遞資訊給 React ，但不會傳遞給你的元件

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);
// Post 元件可以讀出 `props.id`，但是不能讀出 `props.key`