React Списки

В React списки часто создаются с использованием циклических конструкций.

Наиболее предпочтительным методом является метод массива map(), предлагаемый стандартом ES6.

Пример

Давайте создадим простой список автомобилей с использованием метода map():


function MyCars() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Мои автомобили:</h1>
      <ul>
        {cars.map(car => <li>Я — {car}</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

Данный код работает вполне успешно, но вы получите предупреждение о том, что элементы списка не имеют "ключа".

Ключи в списках React

Ключи помогают React отслеживать элементы списка. Благодаря ключам, если элемент обновляется или удаляется, перерисовывается только он, а не весь список заново.

Ключи должны быть уникальны среди соседних элементов, но необязательно уникальны по всему приложению.

Лучше всего использовать уникальный идентификатор (ID) для каждого элемента, а если иного выхода нет, можно использовать индекс массива как ключ.

Пример

Ниже тот же самый пример, но теперь с указанием ключей:


function MyCars() {
  const cars = [
    { id: 1001, brand: 'Ford' },
    { id: 1002, brand: 'BMW' },
    { id: 1003, brand: 'Audi' }
  ];
  return (
    <>
      <h1>Мои автомобили:</h1>
      <ul>
        {cars.map(car => <li key={car.id}>Я — {car.brand}</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);

Использование индекса массива в качестве ключа

Хотя технически возможно использовать индекс массива в качестве ключа, это не рекомендуется, кроме случаев, когда:

  • Список статичен и не будет изменяться.
  • Переопределение порядка и фильтрация элементов не предполагаются.
  • У элементов нет уникальных идентификаторов.

Пример

Использование индекса массива в качестве ключа (не рекомендуется для динамических списков):


function MyCars() {
  const cars = ['Ford', 'BMW', 'Audi'];
  return (
    <>
      <h1>Мои автомобили:</h1>
      <ul>
        {cars.map((car, index) => <li key={index}>Я — {car}</li>)}
      </ul>
    </>
  );
}

createRoot(document.getElementById('root')).render(
  <MyCars />
);