Списки, ключи и условный рендеринг
Рендерьте массивы элементов с помощью .map(), задавайте стабильные props key и условно отображайте элементы с && и тернарным оператором.
«Списки, ключи и условный рендеринг» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Отображение списков с помощью .map()
Отображайте динамический список, вызывая .map() для массива и возвращая JSX для каждого элемента. React отображает массив элементов так же, как один элемент.
const fruits = ['apple', 'banana', 'cherry'];
return (
<ul>
{fruits.map(fruit => (
<li key={fruit}>{fruit}</li>
))}
</ul>
);Свойство key — почему оно важно
key — это специальное свойство React, которое помогает определить, какие элементы в списке изменились, были добавлены или удалены. Без ключей или при использовании нестабильных ключей, например индексов, React может выполнять обновления неправильно.
Хорошие и Bad-ключи
Хорошие ключи: уникальные стабильные идентификаторы из ваших данных, например item.id. Плохие ключи: индексы массива, поскольку элементы могут менять порядок, или случайные значения, изменяющиеся при каждом отображении.
// Bad: index keys — breaks when list reorders
{items.map((item, i) => <Item key={i} {...item} />)}
// Good: stable unique IDs
{items.map(item => <Item key={item.id} {...item} />)}Отображение объектов
Преобразуйте массив объектов в компоненты, деструктурируя объект в свойства.
interface Todo { id: number; text: string; done: boolean; }
const todos: Todo[] = [...];
return (
<ul>
{todos.map(({ id, text, done }) => (
<TodoItem key={id} text={text} done={done} />
))}
</ul>
);Условное отображение с помощью &&
Используйте оператор короткого замыкания &&, чтобы условно включать JSX. Если левая часть ложна, ничего не отображается. Остерегайтесь ложных чисел: 0 отображается как «0».
function Status({ count }: { count: number }) {
return (
<div>
{count > 0 && <Badge count={count} />}
{/* Safer: */}
{count > 0 ? <Badge count={count} /> : null}
</div>
);
}Условное отображение с помощью тернарного оператора
Используйте тернарный оператор, чтобы отображать один из двух элементов в зависимости от условия.
function AuthButton({ isLoggedIn }: { isLoggedIn: boolean }) {
return isLoggedIn
? <button onClick={logout}>Sign Out</button>
: <button onClick={login}>Sign In</button>;
}Условное отображение с помощью оператора if
Для сложных условий используйте оператор if перед return. При состояниях загрузки или ошибки выполняйте ранний возврат.
function UserProfile({ user }: { user: User | null }) {
if (!user) return <p>Loading...</p>;
if (user.banned) return <p>Account suspended.</p>;
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}Фильтрация перед отображением
Фильтруйте массив перед отображением, чтобы выводить только подходящие элементы. Это делает код чистым и понятным.
const activeUsers = users.filter(u => u.active);
return (
<ul>
{activeUsers.map(user => (
<UserItem key={user.id} {...user} />
))}
</ul>
);Пустое состояние
Всегда обрабатывайте случай пустого массива. Молчаливое отображение пустого списка сбивает с толку — вместо этого показывайте понятное сообщение о пустом состоянии.
return (
<div>
{todos.length === 0
? <p className="empty-state">No tasks yet. Add one above!</p>
: <ul>{todos.map(t => <TodoItem key={t.id} {...t} />)}</ul>
}
</div>
);Рендеринг списков через порталы
Длинные списки, которые должны отображаться в другом узле DOM (например, в выпадающем меню), могут использовать ReactDOM.createPortal. Но большая часть списков отображается обычным образом внутри дерева.
Виртуализация списков для повышения производительности
Для очень длинных списков (1 000 и более элементов) используйте библиотеку виртуализации, например react-window или @tanstack/react-virtual. Они отображают только видимые строки, предотвращая проблемы с производительностью DOM.
Быстрая проверка
Когда в списках React допустимо использовать индекс массива в качестве key?
Повторение: списки и условный рендеринг
Рендерите списки с помощью .map(). Всегда добавляйте стабильные уникальные свойства-ключи. Используйте && для необязательных элементов (учитывайте 0). Тернарный оператор — для выбора одного из двух вариантов. Выполняйте ранний возврат при состояниях загрузки или ошибки. Фильтруйте элементы перед отображением условных списков. Для пустых массивов показывайте сообщение о пустом состоянии. Выполняйте виртуализацию очень длинных списков.
Часто задаваемые вопросы
Урок «Списки, ключи и условный рендеринг» бесплатный?
Да — полный текст урока «Списки, ключи и условный рендеринг» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Списки, ключи и условный рендеринг»?
Рендерьте массивы элементов с помощью .map(), задавайте стабильные props key и условно отображайте элементы с && и тернарным оператором. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Списки, ключи и условный рендеринг»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- JSX: синтаксис и транспиляция
- Функциональные компоненты и props
- Хук useState: состояние и повторные рендеры
- Списки, ключи и условный рендеринг