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

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

<span
  id="q-14bee738d69b81ac8e1fe3bde5558a9d"
  data-question-redirect="/prep/react-developer/stilizaciya-komponentov#q-14bee738d69b8115a2fed9815e87cf59"
></span>

## <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. [Условный рендеринг: if, тернарный оператор и null](https://reactdev.ru/learn/conditional-rendering/)
2. [Условный рендеринг в React. Ulbi TV, с 1:04:19](https://www.youtube.com/watch?v=GNrdg3PzpJQ&t=3859s)

:::

---

## <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. [Ключи элементов списка: идентичность и стабильные ID](https://reactdev.ru/learn/rendering-lists/)
   :::

---

## <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. [Виртуализация списков: рендер видимого подмножества](https://ru.legacy.reactjs.org/docs/optimizing-performance.html#virtualize-long-lists)
   :::

---

## Почему индекс массива опасен как key в изменяемом списке? [#q-transfer-0451]

React использует `key`, чтобы сопоставить элемент между рендерами. Если ключ равен индексу, вставка, удаление или сортировка сдвигает ключи на другие сущности. Тогда локальное состояние, DOM input и эффекты могут остаться на позиции и визуально перейти к другой строке. Стабильный уникальный ID сохраняет идентичность сущности. Индекс приемлем для полностью статичного списка, который не меняет порядок и элементы и где строки не имеют состояния, но это хрупкое предположение. `key` должен быть уникален среди siblings и стабилен, а не генерироваться заново при render.

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

1. [Ключи элементов списка: идентичность и стабильные ID](https://reactdev.ru/learn/rendering-lists/)
   :::