Зачем нужен key в React?
key — это специальный проп в React, который используется для уникальной идентификации элементов в списках. Он помогает React правильно управлять состоянием элементов при их добавлении, удалении или изменении порядка. Это особенно важно, когда вы работаете с динамически изменяющимися данными.
Зачем нужен key?
-
Оптимизация перерисовки. Когда элементы списка изменяются, React использует
key
, чтобы определить, какие элементы изменились, добавились или удалились. Это позволяет React минимизировать количество изменений в DOM и повышать производительность. -
Уникальная идентификация. Каждый элемент в списке должен иметь уникальный
key
, чтобы React мог правильно отслеживать и управлять каждым элементом. Это важно для корректного отображения и эффективного обновления.
Пример использования key
const items = ["apple", "banana", "cherry"];
function FruitList() {
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
Не используйте индекс как key:
Использование индекса может привести к неправильному отображению элементов при изменении их порядка. Лучше использовать уникальные идентификаторы для key
.