昨天我們用state lifting的方式做了一個清單小程式，可以新增項目，然後在下方呈現出來。但是，如果將這個程式放在瀏覽器上跑，會出現一個小問題，也就是缺少key，今天會來介紹一下key，並解決這個問題。

清單會碰到的問題：key

當把這個程式放在瀏覽器上跑時，會報出錯誤，大概的意思是清單元素應該要有獨有的key，目前的清單缺少key。這個key就是類似我們常用的id屬性，是React為了辨識清單標籤，並且確保re-render的正確性而要求的property。
為了解決上面這個問題，我們得在li標籤上加上key，並把索引值傳入：

const list = item.map((i, index)=><li key={index}>{i}</li>)
  return (
    <ul>
      {list}
    </ul>
  )
}

要注意，key值要放在Array中的element上，若Array中的element是一個component，key也應該放在這個component上，而不是component中的標籤。
放了key之後，就不會再報錯了！
然而，用索引值做key並不是很好的辦法，由於key是拿來計算前後差異用的ID，而索引值會隨著array的變化而變化，因此很有可能會在re-render後出現非預期的結果。
為此，我們必須放一個獨一無二又不會隨array變化的值。可以使用一個叫做uuid的套件，這個套件能幫我們產生獨一無二的id，可以運用在key上：

Import {v4 as uuidv4} from uuid;

const list = item.map(i=>{
	const id = uuidv4();
	return (<li key={id}>{i}</li>)
})
  return (
    <ul>
      {list}
    </ul>
  )
}

進階說明

key是React用來辨識清單元素、比較前後不同的依據，React會檢查前後的key，如果key有所變動，React就會找出不一樣的地方，並針對清單做增加、刪減或更新。

引用「重新了解React中的key」一文的結論：
React在實際修改DOM之前，會比較前一次render跟目前這一次render結果的“差異”，同一個層級中的所有Component
若出現key值一樣但props不一樣的Component則進行更新
若比對所有key值後，發現有之前不存在的key值，則新增
若比對所有key值後，發現有之前存在的key值消失，則刪除

參考資料：
重新了解React中的key (Part 1)
列表與Key–React