今天在學習 React 檔案，串列渲染一節中提及到一個關于 key 系結索引值（index）性能的問題：
React 官方檔案原文：“如果串列專案的順序可能會變化，我們不建議使用索引來用作 key 值，因為這樣做會導致性能變差，還可能引起組件狀態的問題”，
查閱網上的博客，確實有對 Vue 串列渲染 key 系結索引值問題的探討，Vue 官方檔案有說，但沒有 React 檔案說得大白話，所以有的人沒有注意到這個點，Vue 官方檔案原文：“提供一個唯一的 key attribute”，
通過兩個案例，可以直觀的感受到系結 index 和系結唯一識別符號的區別，
1?? 系結 index 的動態串列：
<ul>
<li v-for="(item, index) of state" :key="index">
<div>
{{ item.name }}
</div>
<button @click="state.splice(index, 1)">Delete Item</button>
</li>
</ul>
仔細觀察圖，每洗掉一個 li，其余的 li 都跟著閃爍，key 是幫助 React、Vue 識別哪些元素改變了，但由于陣列洗掉，其 index 要重新排序，所以每一個 li 系結的 index 都變化了，這樣不合適，除非是靜態串列，
2?? 系結 number、string 等唯一的基礎型別，不是 index 因陣列變化而重新排序的序號：
洗掉一個 li，其余的 li 沒有閃爍，這是因為 id 是唯一的，不會因為洗掉而重新排序，這種小型的串列隨便系結 key 都無所謂，一旦資料量大了，問題就出現了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547691.html
標籤：其他
下一篇：前端設計模式——狀態模式