Списки — это неотъемлемая часть практически любого приложения. Список товаров в интернет-магазине, сообщения в чате, результаты поиска — всё это примеры использования списков. React делает работу с ними простой и интуитивной, но только если вы понимаете основные принципы. Сегодня мы разберём, как правильно рендерить списки, зачем нужны ключи (key) и создадим список задач.

Как рендерить списки в React

В React списки рендерятся с помощью метода .map() — это базовый инструмент для отображения данных из массива. Вместо того чтобы вручную создавать компоненты для каждого элемента, мы можем динамически генерировать их с помощью массива.

Пример: отображение списка

Представьте, что у нас есть массив имен:

const names = ['Иван', 'Анна', 'Пётр'];

Чтобы отобразить их в виде списка, мы используем map():

function App() {
  const names = ['Иван', 'Анна', 'Пётр'];

  return (
    <ul>
      {names.map((name) => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

export default App;

Как это работает?

• names.map() — для каждого элемента массива мы создаём элемент <li>.
• JSX — рендерит эти элементы в DOM.

Зачем нужны ключи (key)?

Ключи — это специальный атрибут, который помогает React оптимизировать рендеринг списков. Они дают React способ отличить один элемент списка от другого.

Почему это важно?

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

Что происходит без ключей?

Если вы не добавите ключи, React будет выдавать предупреждение:

Warning: Each child in a list should have a unique "key" prop.

Как правильно использовать ключи?

• Ключи должны быть уникальными в пределах списка. Например, если вы отображаете список задач, в качестве ключа подойдёт ID задачи.
• Избегайте использования индексов массива как ключей, если элементы списка могут меняться. Это может привести к багам, особенно если порядок элементов динамически изменяется.
• Ключи не передаются в компонент. Они используются только React’ом для отслеживания изменений.

Пример с ключами

function App() {
  const names = ['Иван', 'Анна', 'Пётр'];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li> // Используем index как ключ только если порядок неизменен
      ))}
    </ul>
  );
}

Практика: создаём список задач

Давайте применим наши знания на практике. Мы создадим простой список задач, где каждая задача будет представлена строкой.

Задача

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

Шаг 1: Подготовка данных

Откройте файл App.jsx и добавьте массив задач:

const tasks = [
  { id: 1, text: 'Купить продукты' },
  { id: 2, text: 'Выгулять собаку' },
  { id: 3, text: 'Сделать домашнее задание' },
];

Здесь каждая задача представлена объектом с уникальным id.

Шаг 2: Создание компонента для задач

Добавим компонент TaskList, который принимает массив задач и отображает их:

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

Что здесь происходит?

• tasks.map() — для каждой задачи мы создаём <li>.
• key={task.id} — используем уникальный id в качестве ключа.

Шаг 3: Рендеринг списка в App

Теперь подключим компонент TaskList в App:

function App() {
  const tasks = [
    { id: 1, text: 'Купить продукты' },
    { id: 2, text: 'Выгулять собаку' },
    { id: 3, text: 'Сделать домашнее задание' },
  ];

  return (
    <div>
      <h1>Список задач</h1>
      <TaskList tasks={tasks} />
    </div>
  );
}

export default App;

Шаг 4: Запускаем приложение

В терминале запустите:

npm run dev

Откройте приложение в браузере. Вы увидите заголовок «Список задач» и три задачи под ним:

• Купить продукты
• Выгулять собаку
• Сделать домашнее задание

Дополнительное улучшение: стили

Добавим немного стилей, чтобы список выглядел лучше. Обновите TaskList:

function TaskList({ tasks }) {
  return (
    <ul style={{ listStyle: 'none', padding: 0 }}>
      {tasks.map((task) => (
        <li
          key={task.id}
          style={{
            backgroundColor: '#f9f9f9',
            margin: '10px 0',
            padding: '10px',
            borderRadius: '5px',
            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
          }}
        >
          {task.text}
        </li>
      ))}
    </ul>
  );
}

Теперь список выглядит более аккуратным: каждую задачу обрамляет мягкий серый фон.

Итоги

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

Ключевые моменты:

• Рендеринг списков через map() — быстрый и удобный способ отображения данных.
• Ключи (key) — помогают React эффективно обновлять элементы списка.
• Уникальность ключей — критически важна для производительности и корректного рендеринга.

На практике мы создали список задач с уникальными ключами и сделали его более красивым с помощью стилей. Теперь вы можете использовать эти знания для создания списков любого уровня сложности!