『Day 7』Key 的重要性與正確使用方式

前言

在前幾篇文章中，我們討論了在 React 中渲染內容，包括條件渲染的各種方式。今天我想和大家分享在處理列表渲染時的一個重要概念：Key。

這個議題看似簡單，但在實際開發中卻經常被忽略或誤用。讓我們一起來了解為什麼 Key 這麼重要，以及如何正確地使用它。

為什麼需要 Key？

在開始介紹 Key 之前，我們先來看看最基本的列表渲染寫法：

const people = [
  'Creola Katherine Johnson',
  'Mario José Molina-Pasquel Henríquez',
  'Mohammad Abdus Salam',
  'Percy Lavon Julian',
  'Subrahmanyan Chandrasekhar'
];

function NameList() {
  const listItems = people.map(person => <li>{person}</li>);
  return <ul>{listItems}</ul>;
}

這段程式碼看起來沒什麼問題，但如果你執行它，會在瀏覽器的 Console 看到一個警告，提示我們缺少了 “key” prop。

在 React 的世界裡，Key 扮演著非常重要的角色，它可以用來識別列表中哪些項目發生了變化、被添加或被刪除的特殊屬性。正確使用 key 可以:

提升效能：React 透過 Key 來快速判斷哪些元素需要更新
維持狀態：當列表重新排序時，Key 幫助 React 保持每個元件的狀態
避免渲染錯誤：正確使用 Key 可以預防一些難以追蹤的渲染問題

Key 的使用規則

1. 唯一性

在同一個父元素中渲染的列表裡，Key 必須是唯一的。這就像是我們的身分證字號，每個人都不一樣：

1
2
3

const todoItems = todos.map(todo => (
  <li key={todo.id}>{todo.text}</li>
));

2. 穩定性

Key 的值在不同的渲染週期中應該保持穩定。這表示我們不應該用隨機數或索引作為 Key：

// ❌ 不好的做法
items.map((item, index) => (
  <li key={index}>{item.text}</li>
));

// ✅ 好的做法
items.map(item => (
  <li key={item.id}>{item.text}</li>
));

3. Key 的來源

在實務上，我們可以從這些地方取得合適的 Key：

資料庫的唯一識別碼（ID）
穩定的資料屬性（例如商品編號）
如果是本地產生的資料，可以使用 uuid 之類的套件來產生唯一識別碼

Key 使用的常見錯誤

1. 使用索引作為 Key

很多人會直接使用 map 的索引作為 Key，這看似方便，但可能導致問題：

// ❌ 這樣做可能會有問題
function TodoList() {
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo.text}</li>
      ))}
    </ul>
  );
}

當列表項目的順序改變或有項目被刪除時，使用索引作為 Key 可能會導致：

元件狀態混亂
效能問題
渲染錯誤

2. 使用隨機值作為 Key

1 2	// ❌ 這樣做會導致問題 <li key={Math.random()}>{item.text}</li>

每次渲染時產生新的 Key 會導致 React 認為這是一個全新的元素，造成不必要的重新渲染。

總結

在 React 列表渲染中，Key 是一個特殊的識別屬性，它幫助 React 追蹤和識別每個列表項目的變化，必須使用穩定且唯一的值（如數據庫 ID）作為 key，而不是動態生成的值或索引，這樣 React 才能正確更新 DOM 並維護組件狀態，避免不必要的重新渲染和狀態丟失問題。

因此，選擇穩定且唯一的值作為 Key 不僅能幫助 React 高效更新 DOM，還能避免潛在的狀態錯亂問題，是編寫健全 React 程式碼的重要基礎。