---
title: Условный рендеринг и списки
seo:
  title: Условный рендеринг и списки — React Developer
  description: Тема «Условный рендеринг и списки» для собеседования React Developer. Что такое условный рендеринг в React? Как реализовать условное добавление класса к элементу в React?
---

[Все темы React Developer](/react-developer)

## <strong>Что такое условный рендеринг в React?</strong> [#q-14bee738d69b8122b984d39002ac2625]

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

Пример условного рендеринга&#58;

```jsx
import React, { Component } from "react";

class Greeting extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;

    if (isLoggedIn) {
      return <h1>Привет, пользователь!</h1>;
    } else {
      return <h1>Пожалуйста, войдите в систему.</h1>;
    }
  }
}

export default Greeting;
```

В этом примере компонент <code>Greeting</code> в зависимости от значения пропса <code>isLoggedIn</code> рендерит разные заголовки. Если <code>isLoggedIn</code> равен <code>true</code>, отображается приветствие, в противном случае - приглашение к входу в систему.

Условный рендеринг можно реализовать также с помощью тернарного оператора&#58;

```jsx
class Greeting extends Component {
  render() {
    const isLoggedIn = this.props.isLoggedIn;

    return (
      <div>
        {isLoggedIn ? (
          <h1>Привет, пользователь!</h1>
        ) : (
          <h1>Пожалуйста, войдите в систему.</h1>
        )}
      </div>
    );
  }
}
```

Условный рендеринг особенно полезен, когда требуется адаптировать интерфейс на основе динамических данных или состояний, таких как авторизация пользователя, наличие данных и другие условия.

:::note[Ссылки для изучения]

1. [Условный рендеринг в React](https://reactdev.ru/archive/react16/conditional-rendering/)
   :::

---

## <strong>Как реализовать условное добавление класса к элементу в React?</strong> [#q-14bee738d69b81ac8e1fe3bde5558a9d]

В React вы можете условно добавить класс к элементу, используя тернарный оператор или функцию для определения классового имени. Вот примеры обоих подходов&#58;

<strong>1&#46; С использованием тернарного оператора&#58;</strong>

```jsx
import React from "react";

const MyComponent = ({ isActive }) => {
  return (
    <div className={isActive ? "active" : "inactive"}>
      Содержимое компонента
    </div>
  );
};

export default MyComponent;
```

В этом примере класс <code>active</code> будет добавлен к элементу, если <code>isActive</code> равно <code>true</code>, иначе будет добавлен класс <code>inactive</code>.

<strong>2&#46; С использованием функции для определения класса&#58;</strong>

```jsx
import React from "react";

const MyComponent = ({ isActive }) => {
  const getClassNames = () => {
    return isActive ? "active" : "inactive";
  };

  return <div className={getClassNames()}>Содержимое компонента</div>;
};

export default MyComponent;
```

Здесь мы определяем функцию <code>getClassNames</code>, которая возвращает класс в зависимости от значения <code>isActive</code>.

Если вы хотите добавить несколько классов, вы можете использовать строковое объединение или библиотеки, такие как <code>classnames</code>.

```jsx
import React from "react";
import classnames from "classnames";

const MyComponent = ({ isActive, isHighlighted }) => {
  const classNames = classnames({
    active: isActive,
    highlighted: isHighlighted,
  });

  return <div className={classNames}>Содержимое компонента</div>;
};

export default MyComponent;
```

В этом примере <code>classnames</code> библиотека позволяет добавить несколько классов на основе объекта, где ключи - это названия классов, а значения - условия, при которых класс будет добавлен.

:::note[Ссылки для изучения]

1. [Условный рендеринг в React](https://reactdev.ru/archive/react16/conditional-rendering/)
   :::

---

## <strong>Что такое ключи (</strong><code>keys</code><strong>) в списках React-элементов и зачем они нужны?</strong> [#q-14bee738d69b81a78f42d83e8e97ddf4]

В React, ключи (<code>keys</code>) - это специальные атрибуты, используемые при рендеринге списков компонентов или элементов. Они помогают React оптимизировать процесс обновления и перерисовки компонентов в списках.

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

Пример использования ключей&#58;

```jsx
import React from "react";

const TodoList = ({ todos }) => {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
};

export default TodoList;
```

В примере todo.id сохраняет идентичность задачи при вставках, удалениях и перестановках. Сам по себе key не предотвращает повторный рендер компонента.

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

:::note[Ссылки для изучения]

1. [Условный рендеринг в React](https://reactdev.ru/archive/react16/conditional-rendering/)
   :::

---

## <strong>Что такое "виртуализация списка" (</strong><code>list virtualization</code><strong>) и как она реализуется в React?</strong> [#q-14bee738d69b816c864ccacf3737f774]

<strong>Виртуализация списка</strong> — это техника оптимизации отображения
длинных списков, при которой рендерятся только видимые элементы, а не весь
список.

#### Основные характеристики&#58;

{/* prettier-ignore */}
1. <strong>Экономия ресурсов</strong>&#58;

    - Рендерятся только элементы, видимые в области прокрутки, что улучшает производительность.

1. <strong>Простота реализации</strong>&#58;

    - В React можно использовать библиотеки для виртуализации, такие как <code>react&#45;virtualized</code> или <code>react&#45;window</code>.

#### Пример для react-window 1.x с FixedSizeList. В 2.x API отличается&#58;

```jsx
import { FixedSizeList as List } from "react-window";

const Row = ({ index, style }) => <div style={style}>Row {index}</div>;

const Example = () => (
  <List height={150} itemCount={1000} itemSize={35} width={300}>
    {Row}
  </List>
);
```

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

:::note[Ссылки для изучения]

1. [Условный рендеринг в React](https://reactdev.ru/archive/react16/conditional-rendering/)
   :::