📌 Как отрисовать компоненты на основе массива ?

💬 Спрашивают в 7% собеседований

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

🤔 Почему это нужно?

Отрисовка компонентов на основе массива данных позволяет:

➕ Динамически создавать и отображать элементы интерфейса.

➕ Управлять отображением элементов на основе данных (например, список задач, карточки пользователей и т.д.).

➕ Избегать дублирования кода, создавая компоненты в цикле.

🤔 Как это используется?

Для этого обычно используется метод массива .map(), который перебирает массив данных и возвращает новый массив с JSX-элементами.

Примеры:

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

Предположим, у нас есть массив объектов с данными пользователей:

const users = [
  { id: 1, name: 'Иван', age: 30 },
  { id: 2, name: 'Мария', age: 25 },
  { id: 3, name: 'Петр', age: 40 },
];

2️⃣ Создание компонента для отрисовки каждого пользователя:

Создадим компонент User, который принимает данные пользователя через props:

function User({ name, age }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Возраст: {age}</p>
    </div>
  );
}

3️⃣ Отрисовка списка пользователей:

Используем метод .map() для создания списка компонентов User на основе массива users:

function UserList({ users }) {
  return (
    <div>
      {users.map(user => (
        <User key={user.id} name={user.name} age={user.age} />
      ))}
    </div>
  );
}

Здесь важно использовать уникальный key для каждого элемента списка, чтобы React мог оптимально управлять рендерингом этих элементов.

4️⃣ Использование в основном компоненте:

Наконец, используем компонент UserList в основном компоненте приложения:

function App() {
  return (
    <div>
      <h1>Список пользователей</h1>
      <UserList users={users} />
    </div>
  );
}

export default App;

🤔 Почему это удобно и важно:

➕ Динамичность: Мы можем легко изменить массив users, и наш интерфейс автоматически обновится.

➕ Читаемость: Код становится более структурированным и легче поддерживается.

➕ Оптимизация: Использование ключей позволяет React эффективно обновлять элементы, минимизируя количество изменений в DOM.

Отрисовка компонентов на основе массива данных позволяет динамически создавать элементы интерфейса и улучшает читаемость и поддержку кода.

🪙 1429 вопроса на Frontend разработчика

🔒 База собесов | 🔒 База тестовых