我最近一直在研究React中元素鍵的重要性，我還是有點困惑。
我有這樣一個案例，其中有一個資料網格組件，負責在行中呈現資料。它實作了排序、過濾和分頁功能。我從 api 中獲取了行的資料。
而問題是。 我應該如何正確選擇map函式元素（行）的鍵？
問題是，已經獲取的行資料可能在重繪 期間發生變化（被其他用戶編輯）。
我應該使用唯一的ID作為關鍵屬性（例如nanoid）還是使用row.id？
如果我理解正確的話，使用 row.id 將導致即使某些行的資料被更改，也不會對已經加載的行進行重新渲染。 另一方面，使用唯一的id（如nanoid）將對排序、過濾等的性能產生負面影響。
我的理解是否正確，以及如何正確地做到這一點呢？
uj5u.com熱心網友回復：
密鑰應該始終是唯一的、穩定的（正如Brian在上面提到的），并且在你的代碼中永遠不會被操縱（因此是穩定的）。
一個獨特的ID是首選。我見過有人將整個user物件作為鍵來傳遞。如果有可能會有重復的用戶，這也可能是一個巨大的鍵。
uj5u.com熱心網友回復：
我同意更詳細地研究這個鍵。以下是我的理解。
如果我理解正確的話，使用row.id將導致已經加載的行沒有重新渲染，即使一些行的資料被改變了。
事實并非如此，鍵的目的是識別專案的位置，因此當涉及到調和（將元素轉換為節點）時，React知道是否可以重復使用節點（纖維）以加快更新程序。
讓我們舉個例子，如果最初的關鍵順序是
。 1 2 3
不知為何，經過重新排序，在新的更新中變成了以下內容
2 1 3
然后React被引導使用鍵1的節點來更新專案。專案被更新了，而且在這種情況下，被更新到了正確的位置。BTW，React默認不知道專案的順序，對React來說，它們看起來都差不多；)
我只是給你一個基本案例。但是你可以對其他情況進行猜測，例如，少了一個鍵，或者增加了一個新的鍵。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/322742.html
標籤：
上一篇：React狀態顯示不恰當