0%

React — 列表渲染 (List Rendering)

發表於 2023-01-27 分類於 React Disqus：

React — 列表渲染 (List Rendering)

📚 列表渲染 (List Rendering) 定義

非 JSX 的變數或函數都必須以 { } 包起來!
將可辨識的JSX元素陣列，做列表渲染 ➡️ {[<> </>,<> </>,...]}
可以用 map() 或 filter() 導出並渲染列表
React 規定列表渲染的Array裡每個 element 都應該要有一個 key，如此才能給予每個 element 一個固定的身份
- Key 幫助 React 分辨哪些項目被改變、增加或刪除，所以不可重複且必須是唯一
- Key 只有在周遭有 Array 的情境中才有意義
- 用 Key 抽離 Component ➡️ 如果要抽離一個 ListItem component ，應該要把 Key 放在 Array 裡的 <ListItem /> element 上，而不是把它放在 ListItem 裡面的 <li> element 上

📝 實作並說明 Key 的正確設置位置

const todos = [
  { id: 0, title: "Breakfast"},
  { id: 1, title: "Work"},
  { id: 2, title: "Take a rest"},
  { id: 3, title: "Tea time"},
  { id: 4, title: "Dinner"},
];

❌ 錯誤: key 不能放在 `<li>` 元素上

function ListItem(props) {
  return <li key={props.key}>{props.title}</li> // key 不能放在 <li> 元素上
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyImg />
        <ul>
          {todos.map((todo) => { return  <ListItem key={todo.id} title={todo.title} /> })}
        </ul>
      </header>
    </div>
  ) 
}

✔️ 正確: key 只在array 裡的 `<ListItem />` element 上被指定

function ListItem(props) {
  return <li>{props.title}</li> // 不需在這指定 key
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyImg />
        <ul>
          // key 只在這指定即可
          {todos.map((todo) => { return  <ListItem key={todo.id} title={todo.title} /> })}
        </ul>
      </header>
    </div>
  ) 
}

💁‍♀️ React 不建議使用陣列的索引(index)作為 key，特別是在項目的順序會改變的情況。這會對效能產生不好的影響，也可能會讓 component state 產生問題!可參考 Robin Pokorny 這篇深入剖析使用索引

🔎 參考資料