Почему элементы списка нуждаются в ключе и почему не использовать индекс?

Question

IT Interview Practice · Accepted Answer

Когда вы отображаете список, React должна знать **какой элемент это какой** между рендерами, чтобы она могла правильно переиспользовать, переупорядочить, вставить или удалить узлы DOM. **`key`** — это эта идентичность. ```jsx {users.map(user => ( // stable, unique id ))} ``` ## Почему индекс массива рискован Использование индекса в качестве ключа говорит React "элемент на позиции 0 это тот же элемент, что и раньше" — что ломается в момент, когда список переупорядочивается или вы вставляете/удаляете с начала: ```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. ``` Реальный симптом: список input'ов, где введение текста в одну строку "прыгает" в другую после удаления/сортировки, потому что React переиспользовала неправильный `` (и его внутреннее значение/фокус). ## Почему это важно - Используйте **стабильный, уникальный** id из ваших данных (`user.id`, slug). - Индекс приемлем **только** для статического списка, который никогда не переупорядочивается, не вставляет и не удаляет. - Ключи должны быть уникальны среди **соседей** (не глобально). Ключи — это подсказка для алгоритма согласования; правильное их использование сохраняет и производительность, и состояние компонента корректными.

Почему индекс массива рискован

Почему это важно

Похожие вопросы