Что можно (а что нельзя) устанавливать в качестве key в React? Flashcards
Что можно (а что нельзя) устанавливать в качестве key в React?
Ключи помогают React идентифицировать, какие элементы были изменены, добавлены или удалены. Ключи должны быть заданы элементам внутри массива, чтобы предоставить элементам постоянный идентификатор
Лучший способ выбрать ключ — использовать строку, которая однозначно идентифицирует элемент списка среди его соседних элементов.
Мы не рекомендуем использовать индексы для ключей, если порядок элементов может измениться. Это может негативно сказаться на производительности и вызвать проблемы с состоянием компонента.
Ключи имеют смысл только в контексте окружающего массива.
Например, если вы выделяете компонент ListItem, вам нужно присваивать ключ элементам <ListItem></ListItem> в массиве, а не элементам <li> в самом ListItem.
Придерживайтесь хорошему правилу: внутри вызова map() обязательно указывать ключи для элементов.
Ключи, используемые в массивах, должны быть уникальными среди их элементов на одном и том же уровне. Поэтому им не обязательно быть глобально уникальными. Мы можем использовать те же самые ключи при создании двух разных массивов
Ключи служат подсказкой для React, но они не передаются вашим компонентам. Если вам нужно то же самое значение в вашем компоненте, передайте его явно в виде свойства с другим именем
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
Примеры:
function ListItem(props) {
const value = props.value;
return (
// Неправильно! Здесь не нужно указывать ключ:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Неправильно! Здесь должен быть указан ключ:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
Корректное использование ключа
function ListItem(props) {
// Правильно! Здесь не нужно указывать ключ:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Правильно! Ключ должен быть указан внутри массива.
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
✅ Что использовать в качестве key?
В реальной разработке в качестве key берутся id из базы данных, которые всегда уникальны;
Если вы работаете с локальными данными, то в качестве key в документации рекомендуют использовать crypto.randomUUID() или установить дополнительный пакет uuid.
❌ Что нельзя использовать в качестве key?
index элемента массива:
Именно index элемента массива использует React, если ключ не указан. Но порядок отображения элементов может меняться, если элементы будут добавлены или удалены, или если массив будет переупорядочен. Индекс в качестве ключа приводит к запутанным ошибкам.
Math.random():
С Math.random() в качестве key, ключи никогда не будут совпадать между рендерами. Все компоненты и DOM будут каждый раз создаваться заново. Это медленно и приводит к потере пользовательского ввода внутри элементов списка.
