key適用于Virtual DOM樹新舊情形如下時

舊

<div>
<TodoItem text="one" />
<TodoItem text="two" />
</div>

新

<div>
<TodoItem text="zero" />
<TodoItem text="one" />
<TodoItem text="two" />
</div>

我們只是前插了一個TodoItem 節點，但如果沒有key，<TodoItem text="one" />
<TodoItem text="two" />都會被卸載，然后<TodoItem text="zero" />，<TodoItem text="one" />，<TodoItem text="two" />會被加載，這會造成DOM樹更新成本的劇增。

之所以出現上述這種更新方案，是因為react在判斷兩個新舊節點不同時所依據的"標識"是各節點位置。上述情形中，新舊節點位置不同，react自然會認為新舊節點不同。

而按照我們的理想狀態，應該讓<TodoItem text="one" />,<TodoItem text="two" />不被卸載，僅僅只是<TodoItem text="zero" />被加載，這就需要各個節點增加一個新標識，這個標識應該不隨節點位置的變化而變化。這個標識，就被我們稱為"key"。

• 采用"key"的解決方案

舊

<div>
<TodoItem key={1} text="one" />
<TodoItem key={2} text="two" />
</div>

新

<div>
<TodoItem key={0} text="zero" />
<TodoItem key={1} text="one" />
<TodoItem key={2} text="two" />
</div>
···