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>
···