React Klíče, Ano! Potřebujete je, ale proč vlastně?

Je tu ještě jedna věc, na kterou je třeba pamatovat, a to je. React Klíč atribut, musí jej mít každý prvek vykresleného seznamu. Tento koncept je jednou z prvních věcí, které se každý vývojář front-endu naučí. React na začátku jejich cesty. Pojďme se nyní podívat trochu hlouběji a prozkoumat, proč tomu tak je a kdy si můžeme zkrátit cestu.

Proč potřebujeme tento klíčový atribut?

Nejjednodušší odpověď by byla "optimalizovat re-rendery", ale úplnější odpověď musí přinejmenším zmiňovat koncept React Odsouhlasení. Jedná se o proces, při kterém se zjišťuje, jak co nejefektivněji aktualizovat uživatelské rozhraní. Aby to bylo rychlé, React musí rozhodnout, které části stromu prvků je třeba aktualizovat a které ne. Jde o to, že v DOM může být mnoho prvků a porovnávání jednotlivých prvků při rozhodování o tom, který z nich má být aktualizován, je poměrně nákladné. Chcete-li to optimalizovat, React implementuje algoritmus diffing, který je založen na dvou předpokladech:

1. Dva různé typy prvků nebudou nikdy stejné - proto je vykreslete znovu.
2. Vývojáři mohou ručně pomoci optimalizovat tento proces pomocí klíčových atributů, takže prvky, i když se jejich pořadí změnilo, lze rychleji lokalizovat a porovnat.

Na základě toho můžeme konstatovat, že každý Klíč React by měl být také jedinečný (v rámci seznamu prvků, nikoli globálně) a stabilní (neměl by se měnit). Co se ale může stát, když nejsou tat?

Jedinečnost, stabilita a index pole

Jak jsme již zmínili, Klíče React by měl být stabilní a jedinečný. Nejjednodušší způsob, jak toho dosáhnout, je použít jedinečné ID (například z databáze) a předat ho každému prvku při mapování pole, snadné. Ale co v situacích, kdy nemáme k dispozici ID, jméno ani jiné jedinečné identifikátory, které bychom mohli předat každému prvku? No, pokud jako klíč nepředáváme nic, React ve výchozím nastavení převezme index aktuálního pole (protože je v rámci tohoto seznamu jedinečný) a zpracuje jej pro nás, ale také nám to v konzoli zobrazí pěknou chybovou zprávu:

Proč tomu tak je? Odpověď zní, že index pole není stabilní. Pokud se změní pořadí prvků, změní se i jednotlivé klíče a máme problém. Pokud React se setká se situací, kdy bylo pořadí v seznamu prvků změněno, bude se je stále snažit porovnávat podle klíčů, což znamená, že každé porovnání skončí opětovným sestavením prvku a v důsledku toho bude celý seznam sestaven znovu od začátku. Kromě toho se můžeme setkat s některými neočekávanými problémy, jako je aktualizace stavu komponenty pro prvky jako nekontrolované vstupy a další kouzelné těžko laditelné problémy.

Výjimky

Vraťme se k indexu pole. Pokud jej použijeme jako Klíč React může být tak problematické, proč React bude používat ve výchozím nastavení? Existuje nějaký případ použití, kdy je to v pořádku? Odpověď zní ano, takovým případem použití jsou statické seznamy. Pokud jste si jisti, že seznam, který vykreslujete, nikdy nezmění své pořadí, je bezpečné použít index pole, ale pamatujte, že pokud máte nějaké jedinečné identifikátory, je stále lepší použít místo nich. Můžete si také všimnout, že předání indexů jako klíčů způsobí, že se funkce React zmizí chybová zpráva a současně se zobrazí chyba nebo varování u některých externích linterů. To je způsobeno tím, že explicitní použití indexů jako klíčů je považováno za špatnou praxi a některé lintery to mohou považovat za chybu, zatímco React sám to považuje za situaci "vývojáři vědí, co dělají" - takže to nedělejte, pokud opravdu nevíte, co děláte. Několik příkladů, kdy může být použití této výjimky v pořádku, je rozbalovací seznam se statickým seznamem tlačítek nebo zobrazení seznamu prvků s informacemi o adrese vaší společnosti.

Alternativa ke klíči založenému na datové sadě

Řekněme, že žádná z výše uvedených možností pro nás nepřipadá v úvahu. Musíme například zobrazit seznam prvků založený na poli řetězců, které lze duplikovat, ale lze je také přeuspořádat. V tomto případě nemůžeme použít žádný z řetězců, protože nejsou unikátní (to může způsobit i kouzelné chyby), a index pole není dost dobrý, protože budeme měnit pořadí prvků. Poslední věcí, na kterou se můžeme v podobných situacích spolehnout, je použití některých externích identifikátorů. Nezapomeňte, že musí být stabilní, takže nemůžeme jen tak sáhnout po Math.random(). Existují některé balíčky NPM, které můžeme v takových případech použít, např. "uuid" balíček. Takové nástroje nám mohou pomoci udržet klíče našich seznamů stabilní a jedinečné, i když v našem souboru dat nemůžeme najít správné identifikátory. Nejprve bychom měli zvážit použití databázového ID a indexu pole (pokud je to možné), abychom minimalizovali počet balíčků používaných naším projekt.

Na závěr

• Každý prvek v seznamu React prvky by měly mít jedinečný, stabilní atribut klíče,
• Klíče React se používají k urychlení Proces sesouhlasení a zabránit zbytečnému obnovování prvků v seznamech,
• Nejlepším zdrojem klíčů je jedinečný identifikátor při zadávání dat (například z databáze),
• Jako klíč můžete použít index pole, ale pouze pro statický seznam, jehož pořadí se nebude měnit,
• Pokud neexistuje jiný způsob, jak získat stabilní a jedinečné klíče, zvažte použití externích poskytovatelů ID, například balíčku "uuid".

Přečtěte si více:

Proč byste (pravděpodobně) měli používat Typescript

Jak nezničit projekt špatnými kódovacími postupy?

Strategie načítání dat v NextJS