ReactJS中鍵的意義是什麼？

Question

我想知道，如果我不使用動態添加的組件鍵會發生什麼。我刪除了密鑰，它呈現沒有任何問題，只是給出了有關密鑰使用的警告消息。請有人舉例說明如果我們不使用密鑰會導致什麼後果？

Answer 1

鍵幫助陣營識別哪些項目已經改變，添加或移除。密鑰應給予數組中的元素給予元素的穩定的身份：

例子：

const numbers = [1, 2, 3, 4, 5]; 
const listItems = numbers.map((number) => 
    <li key={number.toString()}> 
    {number} 
    </li> 
); 

TL;渲染DR使用唯一的和恆定的密鑰時動態的孩子，或者期待奇怪的事情發生。

我在使用React.js的幾週中發現的棘手方面之一是瞭解當它是兒童數組的一部分時，您期望傳遞給組件的關鍵屬性。這並不是說你必須指定此屬性，事情會工作的大部分時間除了獲得控制檯上的警告：

陣列中的每個孩子都應該有一個獨特的「鑰匙」的道具。檢查未定義的渲染方法。 通過閱讀鏈接的文檔可以很容易地看不到這種肯定的含義：

當React協調鍵控子項時，它將確保任何帶鍵的子項將被重新排序（而不是破壞）或銷燬（取而代之重用）。 起初看起來對我來說這是所有關於性能，但是，正如保羅O'Shannessy指出，它實際上是關於身份。

這裏的關鍵是理解並非DOM中的所有內容都在React「虛擬DOM」中有表示，並且由於DOM的直接操作（如用戶更改值或jQuery插件監聽元素）未被注意到反應，不使用唯一的和恆定的鍵將結束與反應再造一個部件的DOM節點時，關鍵是不恆定（和丟失在節點任何未跟蹤狀態）或重複使用DOM節點來呈現另一組件時，關鍵是不獨特的（並將其狀態綁定到這個其他組件）。

在這裏，您有一個顯示的結果多麼可怕的現場演示：

http://jsfiddle.net/frosas/S4Dju/

只需添加一個項目，更改，添加更多的項目，看看會發生什麼。

而且see

Source