React
Как и почему использовать ключи в React
Поиск…
Вступление
Всякий раз, когда вы создаете список компонентов React, каждый компонент должен иметь key атрибут. Ключ может быть любым значением, но он должен быть уникальным для этого списка.
Когда React должен отображать изменения в списке элементов, React просто выполняет итерацию по обоим спискам детей одновременно и генерирует мутацию всякий раз, когда есть разница. Если для детей нет ключей, React сканирует каждого ребенка. В противном случае React сравнивает ключи, чтобы узнать, какие из них были добавлены или удалены из списка
замечания
Для получения дополнительной информации перейдите по этой ссылке, чтобы прочитать, как использовать ключи: https://facebook.github.io/react/docs/lists-and-keys.html
Посетите эту ссылку, чтобы узнать, почему рекомендуется использовать ключи: https://facebook.github.io/react/docs/reconciliation.html#recursing-on-children
Основной пример
Для неактивного компонента:
function SomeComponent(props){
const ITEMS = ['cat', 'dog', 'rat']
function getItemsList(){
return ITEMS.map(item => <li key={item}>{item}</i>);
}
return (
<ul>
{getItemsList()}
</ul>
);
}
В этом примере вышеуказанный компонент разрешает:
<ul>
<li key='cat'>cat</li>
<li key='dog'>dog</li>
<li key='rat'>rat</li>
<ul>