React 中的 key 與 diff 優化

在這篇文章中，我會簡單講講關於 React 中的 key 與 diff 優化。

what

key 是 React 用於追蹤列表中元素被修改、被添加或者被移除的輔助標識。

why

React 經過對列表中元素設置惟一 key ，對 virtual-dom 的 diff 過程進行算法優化。

how

在 React 的 diff 過程當中 React 會經過元素的 key 值來判斷該元素是否已經存在？是否須要建立？是否須要移動位置？從而減小沒必要要的元素渲染。

usage

• key 應該在數組內，且在兄弟元素之間是惟一標識，但不須要是全局惟一。
• 不推薦使用索引來做爲 key ，由於 index 並非穩定不變的，在不一樣的更新過程當中，下標可能不一樣，因此當列表項順序發生改變時，渲染將會較慢。
• key 只是給 React 內部使用，不會被傳給組件。

best practise

使用列表元素的 id 做爲鍵值。