昨天我們在製作電影卡片元件，雖然畫面看起來沒問題但編輯器跳出了🚨

這個是什麼意思呢？在React中當我們使用到array item時，應該給每一個array item 一組key，key可以是字串或是數字，必須在該 array中具有獨特性。

追加key 進入資料

先使用最簡單的數字方法：

  {
    id: 0,
    title: "令人討厭的松子的一生",
    year: "2006年",
    minutes: "2 小時 10 分鐘",
    director: "中島哲也"
  },
  {
    id: 1,
    title: "鬥陣俱樂部",
    year: "1999 年",
    minutes: "2 小時 19 分鐘",
    director: "大衛·芬奇"
  },

在這邊我們在array item中追加id ，並給予它一個編號。再來，我們回到元件App.js檔案，在遍歷return的項目中追加key的資料。

    <InfoCard
      //在這邊追加key
      key={info.id}
      title={info.title}
      year={info.year}
      minutes={info.minutes}
      director={info.director}
    />

這樣我們的warning 就消失了，乾乾淨淨。

雖然警告就這樣消失了，但為什麼我們需要key的存在呢？剛剛把key跟其他props放在一起，所以key也算是一種props嗎？

什麼是key

假如我們試著將key和其他props一起console.log 出來

function InfoCard({ key, title, year, minutes, director }) {
  console.log(key)
  console.log(year)
  console.log(minutes)
  console.log(director)

  return (
    // ...
  );
}

可以發現key呈現undefined。

若回歸純粹的JavaScript來思考，一樣以「東京教父」這筆資料為例子，可能會寫成這樣：

const element = React.createElement(
  InfoCard,
  {
    key: 5,
     title: "東京教父",
    year: "2003年",
    minutes: "1 小時 32 分鐘",
    director: "今敏"
  }
);

但實際執行是比較接近這樣子的：

const element = {
  type:InfoCard,
  key: 5,
  props: {
    title: "東京教父",
    year: "2003年",
    minutes: "1 小時 32 分鐘",
    director: "今敏"
  }
}

key 在React當中是一個保留字（reserved word），它會告訴React這個是element本身的屬性，本質上是 React 用來識別元素的一種標識符。它並不會被直接傳遞到元素的屬性中，而是在 React 的背後用於管理元素的唯一性。

為什麼我們需要key

key 在React 中的作用是用來指示 React 元素在更新過程中的對應關係，可以讓 React 在處理動態列表或元素集合時，更有效地辨識出每個元素的變動。

React 可以根據這個 key 來追蹤元素的變化，譬如你在新的資料陣列中添加了元素，React 將能夠識別出新元素並將其加入到 DOM 中。同樣地，如果你從資料陣列中移除了元素，React 將能夠準確找到並移除對應的 DOM 元素。如果元素的順序發生變化，React 也可以根據 key 屬性知道元素是否被重新排列。

會有這樣子的原因是因為React 並不事先知道資料的變更將如何影響網頁的呈現。當我們更改應用程式中的資料時，React 並不知道我們實際上進行了哪些操作。它僅知道資料已經從某種狀態轉變為另一個狀態。

當 React 檢測到資料變更，它必須解決的問題是如何根據新的資料狀態來更新 DOM，以便反映這個變化。React 要決定是否添加、移除或更新 DOM 元素，以便讓 DOM 與應用程式的新狀態保持一致。

key 的使用注意事項

• key 必須在保持唯一性，但這僅限該array，若在其他array當中仍然可以使用同樣的key。
• key的值不應該在渲染中改變，所以像是使用 key={Math.random()} 或是使用array的index去設定都是不適合的，array 的index有可能因為刪減/新增資料而改動。
• 因為key並不會像prop一樣，傳送資料到元件，因此如果你需要將元件編號的需求，必須要分別去設定，例如：<Profile key={id} userId={id} />
• key應該應用在最頂層(top-level)的元素上，而不應該應用在內層的元素上。

參考資料

1. React 官方文件 - Rendering List
2. The Joy of React by Josh W Comeau - key