Dlaczego elementy listy potrzebują klucza i dlaczego nie używać indeksu?

Question

IT Interview Practice · Accepted Answer

Gdy renderujesz listę, React musi wiedzieć **który element to który** między renderowaniami, aby mógł prawidłowo ponownie użyć, zmienić kolejność, wstawić lub usunąć węzły DOM. **`key`** to ta tożsamość. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Dlaczego indeks tablicy jest ryzykowny Używanie indeksu jako klucza mówi React'owi "element na pozycji 0 to ten sam element co poprzednio" — co się psuje w momencie, gdy lista zmienia kolejność lub wstawisz/usuniesz z przodu: ```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. ``` Rzeczywisty symptom: lista pól wejściowych, gdzie wpisanie w jeden wiersz "przeskakuje" do innego po usunięciu/sortowaniu, ponieważ React ponownie użył złego `` (i jego wewnętrznej wartości/fokusa). ## Dlaczego to ważne - Używaj **stabilnego, unikalnego** id z twoich danych (`user.id`, slug). - Indeks jest akceptowalny **tylko** dla statycznej listy, która nigdy się nie zmienia, nie wstawia ani nie usuwa. - Klucze muszą być unikalne wśród **rodzeństwa** (nie globalnie). Klucze są wskazówką dla algorytmu reconciliation; prawidłowe ich ustawienie zapewnia zarówno wydajność, jak i poprawność stanu komponentu.

Dlaczego indeks tablicy jest ryzykowny

Dlaczego to ważne

Powiązane pytania