Proč potřebují prvky seznamu klíč a proč nepoužít index?

Question

IT Interview Practice · Accepted Answer

Když vykreslujete seznam, React potřebuje způsob, jak vědět, **který prvek je který** mezi vykreslováními, aby mohl správně znovu použít, změnit pořadí, vložit nebo odstranit uzly DOM. **`key`** je tato identita. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Proč je index pole riskantní Použití indexu jako klíče říká React "prvek na pozici 0 je stejný prvek jako dříve" — což se zlomí v okamžiku, kdy se seznam změní na pořadí, nebo vložíte/odstraníte zepředu: ```jsx // items: [A, B, C] with keys 0,1,2 // you DELETE A → [B, C], keys become 0,1 // React thinks key 0 (was A) is now B, key 1 (was B) is now C... // so it keeps the wrong DOM state with the wrong item. ``` Skutečný příznak: seznam vstupů, kde psaní v jednom řádku "skočí" na další po smazání/řazení, protože React znovu použil špatný `` (a jeho interní hodnotu/zaměření). ## Pravidla - Používejte **stabilní, jedinečné** id z vašich dat (`user.id`, slug). - Index je přijatelný **pouze** pro statický seznam, který se nikdy nemění, nevkládá nebo neodstraňuje. - Klíče musí být jedinečné mezi **stejnými prvky** (ne globálně). Klíče jsou nápověda pro algoritmus reconciliace; jejich správné získání udržuje správný výkon i stav komponenty.

Proč je index pole riskantní

Pravidla

Související otázky