昨天我們將資料渲染到頁面上，但說了有個重要的地方沒有提，就是Key。

KEY

通常看到一個新東西，就是要先問：

1. 這是甚麼？
2. 這要拿來幹嘛？
3. 為什麼要這個東西？

文件是這樣說的：

Key 幫助 React 分辨哪些項目被改變、增加或刪除。在 array 裡面的每個 element 都應該要有一個 key，如此才能給予每個 element 一個固定的身份：

當我們在渲染Data的時候，我們會把資料迭代的綁到頁面上，如果只是需要單純呈現純靜態的頁面，(我個人認為)有沒有KEY沒有實際上的影響，但我們在撰寫網頁的時候幾乎都會有很多的互動。

最簡單的就是點擊事件，假設我們想要點第一行，我們必須在第一行上面綁定一個事件，如果是原本寫js，那麼你就會綁定兩次事件，然後用參數()來區別現在是誰被點擊。

我要點 第一行
我要點 第二行

但如果是react，我在p標籤裡面放入了一個clickMe,那麼，當我點擊p的時候，所有的p都會反映這個點擊事件，但我只想點第一行啊！！
怎麼辦？所以要讓react知道，你現在在點的是誰，這時候就需要KEY來辨別區分每一個element。

function Blog(props) {
  const content = props.posts.map((post) =>
    <div>
      <h3 >{post.title}</h3>
      <p onClick={this.clickMe}>{post.content}</p>
    </div>
  );
  return (
    <div>
      {content}
    </div>
  );
}

所以，為了區別每一個element，key值一定是要唯一的，否則一樣會變成我點了這個element，但我其實不知道我再點誰。

那麼，就來回答我最初的問題吧！

1. 這是甚麼？
   這是一個搭配array渲染的方法，每一個element上都要有
2. 這要拿來幹嘛？
   那來辨認每一個element，所以值必須唯一。
3. 為什麼要這個東西？
   因為react渲染的時候，同一組tag可以直接的帶入不同的值，如果沒有key的話，我們會不知道現在操作的element是哪一筆資料。