開發者要了解index作為key是反模式

我曾多次看到開發者在渲染列表的時候把列表項的index作為它的key。

)} 這看起來很優雅，而且能夠解決警告(這才是「真」問題，對吧?)的問題，這樣做有什麼危險呢?

讓我來解釋，key是react唯一用來確定dom元素的東西，如果你想列表增加一項或移除中間的某項，會發生什麼事?如果key和之前乙個一樣react就會假定這個dom元素和之前對應的元件是乙個，但是它們可能並不是同乙個了。

為了證明潛在的危險我建立了乙個簡單示例

這表明，如果不指定key的時候react會使用index，因為這是那個時候最好的猜測，而且它會警告你說這不是最優解(它通過令人困惑的語句表述這個意思)。如果你主動提供了它，react就認為你知道你在幹什麼。記住這個示例，它能產生不可**的結果。

比較好

像這樣的應該都有乙個永久的唯一的屬性，當列表項建立的時候它是最合適被設定為key的，顯然我是在說id，我們可以用下面的方式使用它：

)} 另外的實現方式是把編號遞增移動到抽象方法中，使用乙個全域性的index來確保任何兩個列表項的id不同。

todocounter = 1;

function createnewtodo(text)

}更好

var shortid = require('shortid');

function createnewtodo(text)

} tl;dr:為每個列表項生成乙個唯一的id，並在渲染列表的時候使用它作為key。