Klucze React, tak! Potrzebujesz ich, ale dlaczego dokładnie?

Jest jeszcze jedna rzecz, o której należy pamiętać, a mianowicie React Klucz każdy element renderowanej listy musi go posiadać. Koncepcja ta jest jedną z pierwszych rzeczy, o których uczy się każdy programista front-endu React na początku ich podróży. Przyjrzyjmy się teraz nieco głębiej, aby dowiedzieć się, dlaczego tak jest i kiedy możemy pójść na skróty.

Dlaczego potrzebujemy tego kluczowego atrybutu?

Najprostszą odpowiedzią byłoby "zoptymalizować ponowne renderowanie", ale bardziej kompletna odpowiedź musi przynajmniej wspomnieć o koncepcji React Uzgodnienie. Jest to proces polegający na ustaleniu, jak zaktualizować interfejs użytkownika w najbardziej efektywny sposób. Aby zrobić to szybko, React musi zdecydować, które części drzewa elementów muszą zostać zaktualizowane, a które nie. Problem polega na tym, że w DOM może znajdować się wiele elementów, a porównywanie każdego z nich w celu podjęcia decyzji, który z nich powinien zostać zaktualizowany, jest dość kosztowne. Aby to zoptymalizować, React implementuje algorytm diffing, który opiera się na dwóch założeniach:

1. Dwa różne typy elementów nigdy nie będą takie same - więc należy je ponownie wyrenderować.
2. Programiści mogą ręcznie pomóc zoptymalizować ten proces za pomocą kluczowych atrybutów, dzięki czemu elementy, nawet jeśli ich kolejność uległa zmianie, mogą być szybciej lokalizowane i porównywane.

Na tej podstawie możemy stwierdzić, że każdy Klucz React powinny być również unikalne (w obrębie listy elementów, nie globalnie) i stabilne (nie powinny się zmieniać). Ale co może się stać, gdy nie są one takie same?

Wyjątkowość, stabilność i indeks tablicy

Jak wspomnieliśmy wcześniej, Klawisze React powinien być stabilny i unikalny. Najprostszym sposobem na osiągnięcie tego jest użycie unikalnego identyfikatora (na przykład z bazy danych) i przekazanie go do każdego elementu podczas mapowania tablicy. Ale co z sytuacjami, w których nie mamy ID, nazwy lub innych unikalnych identyfikatorów do przekazania każdemu elementowi? Cóż, jeśli nie przekażemy niczego jako klucza, React domyślnie pobierze bieżący indeks tablicy (ponieważ jest on unikalny w ramach tej listy), aby obsłużyć go za nas, ale da nam również ładny komunikat o błędzie w konsoli:

Dlaczego tak się dzieje? Odpowiedź brzmi: indeks tablicy nie jest stabilny. Jeśli zmieni się kolejność elementów, każdy z kluczy ulegnie zmianie i mamy problem. Jeśli React napotka sytuację, w której kolejność na liście elementów została zmieniona, nadal będzie próbował porównać je według kluczy, co oznacza, że każde porównanie zakończy się ponownym zbudowaniem komponentu, a w rezultacie cała lista zostanie odbudowana od zera. Ponadto możemy napotkać pewne nieoczekiwane problemy, takie jak aktualizacje stanu komponentów dla elementów takich jak niekontrolowane wejścia i inne magiczne, trudne do debugowania problemy.

Wyjątki

Wróćmy do indeksu tablicy. Jeśli używamy go jako Klucz React może być tak problematyczne, dlaczego React będzie go używać domyślnie? Czy jest jakiś przypadek użycia, w którym można to zrobić? Odpowiedź brzmi: tak, przypadkiem użycia są listy statyczne. Jeśli jesteś pewien, że renderowana lista nigdy nie zmieni swojej kolejności, możesz bezpiecznie użyć indeksu tablicy, ale pamiętaj, że jeśli masz jakieś unikalne identyfikatory, nadal lepiej jest ich użyć. Można również zauważyć, że przekazanie indeksów jako kluczy spowoduje, że funkcja React komunikat o błędzie znika, jednocześnie powodując wyświetlenie błędu lub ostrzeżenia przez niektóre z zewnętrznych linterów. Wynika to z faktu, że jawne użycie indeksów jako kluczy jest uważane za złą praktykę, a niektóre lintery mogą traktować to jako błąd, podczas gdy React sama uważa to za sytuację "deweloperzy wiedzą, co robią" - więc nie rób tego, chyba że naprawdę wiesz, co robisz. Kilka przykładów sytuacji, w których można użyć tego wyjątku, to lista rozwijana ze statyczną listą przycisków lub wyświetlanie listy elementów z informacjami o adresie firmy.

Alternatywa dla klucza opartego na zestawie danych

Załóżmy, że żadna z powyższych opcji nie jest dla nas dostępna. Na przykład, musimy wyświetlić listę elementów opartą na tablicy ciągów, które mogą być duplikowane, ale mogą być również uporządkowane. W tym przypadku nie możemy użyć żadnego z ciągów, ponieważ nie są one unikalne (może to również powodować pewne magiczne błędy), a indeks tablicy nie jest wystarczająco dobry, ponieważ zmienimy kolejność elementów. Ostatnią rzeczą, na której możemy polegać w takich sytuacjach, jest użycie zewnętrznych identyfikatorów. Pamiętajmy, że muszą one być stabilne, więc nie możemy po prostu użyć Math.random(). Istnieją pewne pakiety NPM, których możemy użyć w takich przypadkach, na przykład "uuid" package. Narzędzia takie jak to mogą pomóc nam utrzymać klucze listy stabilne i unikalne, nawet jeśli nie możemy znaleźć odpowiednich identyfikatorów w naszym zestawie danych. W pierwszej kolejności powinniśmy rozważyć użycie identyfikatora bazy danych i indeksu tablicy (jeśli to możliwe), aby zminimalizować liczbę pakietów używanych przez naszą listę. projekt.

Podsumowując

• Każdy element na liście React powinny mieć unikalny, stabilny atrybut klucza,
• Klawisze React są używane do przyspieszenia Proces uzgadniania i uniknąć niepotrzebnego przebudowywania elementów na listach,
• Najlepszym źródłem kluczy jest unikalny identyfikator wprowadzanych danych (na przykład z bazy danych),
• Można użyć indeksu tablicy jako klucza, ale tylko dla listy statycznej, której kolejność nie ulegnie zmianie,
• Jeśli nie ma innego sposobu na uzyskanie stabilnych i unikalnych kluczy, należy rozważyć użycie zewnętrznych dostawców identyfikatorów, na przykład pakietu "uuid".

Czytaj więcej:

Dlaczego (prawdopodobnie) powinieneś używać Typescript

Jak nie zabić projektu złymi praktykami kodowania?

Strategie pobierania danych w NextJS