我曾多次看到開(kāi)發(fā)者在渲染列表的時(shí)候把列表項(xiàng)的index作為它的key。 

{todos.map((todo, index) => 
  <Todo {...todo} 
    key={index} /> 
)} 

 這看起來(lái)很優(yōu)雅，而且能夠解決警告(這才是“真”問(wèn)題，對(duì)吧?)的問(wèn)題，這樣做有什么危險(xiǎn)呢?

It may break your application and display wrong data!

讓我來(lái)解釋?zhuān)琸ey是React唯一用來(lái)確定DOM元素的東西，如果你想列表增加一項(xiàng)或移除中間的某項(xiàng)，會(huì)發(fā)生什么事?如果key和之前一個(gè)一樣React就會(huì)假定這個(gè)DOM元素和之前對(duì)應(yīng)的組件是一個(gè)，但是它們可能并不是同一個(gè)了。

為了證明潛在的危險(xiǎn)我創(chuàng)建了一個(gè)簡(jiǎn)單示例

 這表明，如果不指定key的時(shí)候React會(huì)使用index，因?yàn)檫@是那個(gè)時(shí)候最好的猜測(cè)，而且它會(huì)警告你說(shuō)這不是最優(yōu)解(它通過(guò)令人困惑的語(yǔ)句表述這個(gè)意思)。如果你主動(dòng)提供了它，React就認(rèn)為你知道你在干什么。記住這個(gè)示例，它能產(chǎn)生不可預(yù)測(cè)的結(jié)果。

比較好

像這樣的應(yīng)該都有一個(gè)永久的唯一的屬性，當(dāng)列表項(xiàng)創(chuàng)建的時(shí)候它是最合適被設(shè)置為key的，顯然我是在說(shuō)id，我們可以用下面的方式使用它： 

{todos.map((todo) => 
  <Todo {...todo} 
    key={todo.id} /> 
)} 

 另外的實(shí)現(xiàn)方式是把編號(hào)遞增移動(dòng)到抽象方法中，使用一個(gè)全局的index來(lái)確保任何兩個(gè)列表項(xiàng)的id不同。 

todoCounter = 1; 
function createNewTodo(text) { 
  return { 
    completed: false, 
    id: todoCounter++, 
    text 
  } 
} 

 更好

一個(gè)產(chǎn)品級(jí)別的方案應(yīng)該是一個(gè)更健壯的方法，能夠處理分散創(chuàng)建列表項(xiàng)。因此，我推薦使用shortid。它能夠快速生成“短 無(wú)序 url友好 唯一”的id，代碼像下面這樣： 

var shortid = require('shortid'); 
function createNewTodo(text) { 
  return { 
    completed: false, 
    id: shortid.generate(), 
    text 
  } 
} 

 TL;DR:為每個(gè)列表項(xiàng)生成一個(gè)唯一的id，并在渲染列表的時(shí)候使用它作為key。