Отрисовка списков и роль keys

Преврати массив данных в список элементов на экране с помощью map и обозначь каждый элемент через keys.

8 мин · 3 вопросов

Интерфейсы полны списков: сообщения в переписке, товары в магазине, треки в плейлисте... Вместо того чтобы копировать теги вручную, ты берёшь массив данных и преобразуешь его методом map. Короткое напоминание: map применяет функцию к каждому элементу массива и возвращает новый массив с результатами.

const fruits = ["apple", "banana", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

В React ты делаешь ровно то же самое, только функция, переданная в map, возвращает JSX, а не строку. React умеет показывать массив JSX-элементов: он отрисовывает их один за другим. Единственное требование - дать каждому элементу специальный prop с именем key.

function FruitList() {
  const fruits = ["apple", "banana", "kiwi"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Зачем нужен key? Это уникальная метка, которая позволяет React узнавать каждый элемент, когда список меняется (добавление, удаление, перестановка), как номерки в гардеробе: без номерка невозможно вернуть правильное пальто. Благодаря keys React обновляет только то, что действительно изменилось. На практике лучший key - это уникальный и стабильный идентификатор из твоих данных, например поле id.

const tasks = [
  { id: 1, label: "Buy groceries" },
  { id: 2, label: "Water the plants" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

Проверка знаний

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

1. Какой метод массива используется для отрисовки списка в React?
   • push
   • map
   • forEach
2. Для чего нужен prop key?
   • Для автоматической сортировки списка по алфавиту
   • Для защиты списка паролем
   • Чтобы React мог опознать каждый элемент списка
3. Какое значение лучше всего подходит для key?
   • Уникальный и стабильный идентификатор из данных
   • Индекс элемента в массиве, в любом случае
   • Случайное число, генерируемое при каждой отрисовке