我曾多次看到開發者在渲染清單的時候把清單項的index作為它的key。
{todos.map((todo, index) =>
<todo {...todo}
key={index} />
)}
這看起來很優雅，而且能夠解決警告(這才是“真”問題，對吧?)的問題，這樣做有什麼危險呢?
it may break your application and display wrong data!
讓我來解釋，key是react唯一用來确定dom元素的東西，如果你想清單增加一項或移除中間的某項，會發生什麼事?如果key和之前一個一樣react就會假定這個dom元素和之前對應的元件是一個，但是它們可能并不是同一個了。
為了證明潛在的危險我建立了一個簡單示例
這表明，如果不指定key的時候react會使用index，因為這是那個時候最好的猜測，而且它會警告你說這不是最優解(它通過令人困惑的語句表述這個意思)。如果你主動提供了它，react就認為你知道你在幹什麼。記住這個示例，它能産生不可預測的結果。
比較好
像這樣的應該都有一個永久的唯一的屬性，當清單項建立的時候它是最合适被設定為key的，顯然我是在說id，我們可以用下面的方式使用它：
{todos.map((todo) =>
key={todo.id} />
另外的實作方式是把編号遞增移動到抽象方法中，使用一個全局的index來確定任何兩個清單項的id不同。
todocounter = 1;
function createnewtodo(text) {
return {
completed: false,
id: todocounter++,
text
}
}
更好
一個産品級别的方案應該是一個更健壯的方法，能夠處理分散建立清單項。是以，我推薦使用shortid。它能夠快速生成“短 無序 url友好 唯一”的id，代碼像下面這樣：
var shortid = require('shortid');
id: shortid.generate(),
tl;dr:為每個清單項生成一個唯一的id，并在渲染清單的時候使用它作為key。
作者：hepeguo
來源：51cto