Podając unikalne klucze do komponentów, czy można używać Math.random() do generowania tych kluczy?

Question

Problem jest następujący:

Mam dane w formie listy kilku tysięcy elementów. Niektóre z nich są duplikatami, a w takim przypadku może istnieć również szansa posiadania duplikatów kluczy. Ponieważ nie mam prawdziwego "identyfikatora" ani niczego, co dałoby mi możliwość nadania wszystkim elementom ich identyfikatora unikatowych kluczy, czy można zamiast tego używać Math.random()?

Z tego co rozumiem, klucze są używane głównie do reagowania na różnicowanie komponentów. Myślę, że tak naprawdę nie mam nic wspólnego z kluczami w moim kodzie, to powinno pójść dobrze? Aby upewnić się, że nie będzie duplikatu, równie dobrze mogę podzielić dwie randmy matematyczne ze sobą, aby uzyskać prawie na pewno unikalny klucz.

Czy to dobra praktyka? Czy mogę tego używać bez martwienia się o nic?

Answer 1

Myślę, że twój komponent odmontuje i ponownie zamontuje nowy za każdym razem, gdy zmieni się klucz, więc ze względu na wydajność użycie Math.random() będzie co najmniej suboptymalne.

Jeśli zmienisz kolejność komponentów, użycie indeksu jako klucza nie będzie zbyt pomocne, ponieważ React nie będzie w stanie po prostu przesuwać istniejących węzłów DOM i będzie musiał je ponownie renderować, który znów będzie miał podoptymalną wydajność, ale w tym przypadku tylko przy ponownym zamawianiu listy, więc w twoim przypadku wolałbym używać indeksu zamiast Math.random, pod warunkiem, że nie planujesz zmienić kolejności swojej listy w tak czy inaczej.

Jeśli zamierzasz zmienić kolejność na liście, wygenerowałbym unikalne identyfikatory dla twoich podmiotów, jeśli nie ma żadnych wcześniej istniejących niepowtarzalnych identyfikatorów, których możesz użyć.

Szybki sposób dodawania identyfikatorów to po prostu zmapowanie kolekcji i przypisanie indeksu do każdego elementu po otrzymaniu (lub utworzeniu) kolekcji, np.

const myItemsWithIds = myItems.map((item, index) => { ...item, myId: index }); 

W ten sposób każdy przedmiot otrzymuje unikalny, statyczny identyfikator.

Answer 2

Od react documentation:

Jeśli nie zapewniają stabilne klawiszy (przy użyciu Math.random() na przykład), wszystkie podrzędne drzewa będą ponownie wydanego za każdym razem. Dając użytkownikom możliwość wyboru klucza, mają możliwość strzelania sobie w stopę.

Answer 3

Klucze powinny być stabilne, przewidywalne i niepowtarzalne. Niestabilne klucze (takie jak te produkowane przez Math.random()) spowodują niepotrzebne odtworzenie wielu instancji komponentów i węzłów DOM, co może spowodować degradację wydajności i utratę stanu komponentów potomnych.

https://facebook.github.io/react/docs/reconciliation.html

Answer 4

Wystarczy wdrożyć następujący kod w swoim reagować składnik ...

constructor(props) { 
    super(props); 

    this.keyCount = 0; 
    this.getKey = this.getKey.bind(this); 
} 

getKey(){ 
    return this.keyCount++; 
} 

... i nazwać this.getKey() każdym razem trzeba nowy klucz jak:

key={this.getKey()}