ReactJS - Условное рендеринг

Здравствуйте, будущие разработчики React! Сегодня мы погрузимся в одну из самых мощных функций React: условное рендеринг. Не волнуйтесь, если вы новички в программировании; я проведу вас через это понятие шаг за шагом, так же, как я делал это для countless студентов на протяжении многих лет преподавания. Так что возьмите杯 кофе (или чая, если это ваше дело) и отправляйтесь в это увлекательное путешествие вместе со мной!

Что такое условное рендеринг?

Прежде чем мы перейдем к specifics React, давайте поговорим о том, что же такое условное рендеринг. Представьте, что вы создаете магическую открытку. В зависимости от того, день это или ночь, вы хотите, чтобы открытка говорила либо "Доброе утро!", либо "Добрый вечер!". Это и есть условное рендеринг в двух словах – отображение разного контента в зависимости от определенных условий.

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

Условное рендеринг в React

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

1. Использование операторов if/else

Самый простой способ реализации условного рендеринг – это использование проверенных временем операторов if/else. Давайте рассмотрим пример:

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

В этом примере у нас есть компонент Greeting, который принимает prop isLoggedIn. В зависимости от того, авторизован ли пользователь или нет, он возвращает разный JSX.

2. Использование тернарного оператора

Хотя операторы if/else работают хорошо, они могут сделать наш код немного verbose. Вступает тернарный оператор – более краткий способ записи условных выражений:

function Greeting({ isLoggedIn }) {
return (
<h1>
{isLoggedIn ? 'Добро пожаловать обратно!' : 'Пожалуйста, авторизуйтесь.'}
</h1>
);
}

Этот пример делает exactly то же самое, что и наш предыдущий пример, но в более компактной форме. Это как швейцарский армейский нож условного рендеринг!

3. Оператор логического &&

Иногда вам нужно отрендерить что-то только если условие истинно, и не рендерить ничего, если оно ложно. В таких случаях оператор логического && comes в handy:

function Notification({ hasUnreadMessages }) {
return (
<div>
{hasUnreadMessages &&
<p>У вас есть новые сообщения!</p>
}
</div>
);
}

В этом примере элемент <p> будет отрендерен только если hasUnreadMessages истинно. Если он ложно, ничего не будет отрендерено на его месте.

4. Оператор switch

Когда у вас есть несколько условий для проверки, оператор switch может быть удобным способом обработки условного рендеринг:

function WeatherForecast({ weather }) {
switch(weather) {
case 'sunny':
return <p>Это美丽й день!</p>;
case 'rainy':
return <p>Не забудьте зонтик!</p>;
case 'snowy':
return <p>Оденьтесь потеплее, на улице холодно!</p>;
default:
return <p>Прогноз погоды недоступен.</p>;
}
}

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

5. Условное рендеринг компонентов

Иногда вам может понадобиться рендерить целые компоненты условно. Вот как это можно сделать:

function Dashboard({ isAdmin }) {
return (
<div>
<h1>Добро пожаловать в ваш Dashboard</h1>
{isAdmin && <AdminPanel />}
<UserPanel />
</div>
);
}

В этом примере компонент AdminPanel будет отрендерен только если isAdmin истинно, в то время как UserPanel всегда отрендерен.

Продвинутые техники

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

6. Использование объектов для условного рендеринг

Иногда вы можете обнаружить, что у вас много условий. В таких случаях использование объекта может сделать ваш код более maintainable:

const PAGES = {
home: <HomePage />,
about: <AboutPage />,
contact: <ContactPage />,
};

function App({ currentPage }) {
return (
<div>
{PAGES[currentPage] || <NotFoundPage />}
</div>
);
}

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

7. Условное рендеринг с HOCs

Высшие компоненты (HOCs) также могут быть использованы для условного рендеринг. Вот простой пример:

function withAuth(Component) {
return function AuthenticatedComponent(props) {
const isAuthenticated = checkAuthStatus(); // Реализуйте эту функцию
if (isAuthenticated) {
return <Component {...props} />;
} else {
return <LoginPage />;
}
}
}

const ProtectedPage = withAuth(SecretPage);

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

Заключение

Условное рендеринг – это мощный инструмент в вашем наборе React. Он позволяет вам создавать динамические,responsive интерфейсы пользователей, которые адаптируются к изменениям данных и взаимодействию пользователей. Как и с любым программным концептом, ключ к maîtriser условное рендеринг – это практика. Попробуйте реализовать эти техники в своих собственных проектах, и вскоре вы будете условно рендерить как профи!

Помните, нет одного "правильного" способа условного рендеринг. Лучший метод зависит от вашего конкретного случая использования и предпочтений вашей команды (или личных). Так что экспериментируйте, получайте удовольствие и счастливого кодинга!

Метод	Описание	Случай использования
if/else statements	Традиционная условная логика	Простые условия с несколькими строками кода
Ternary operator	Компактное условное выражение	Простые условия с короткими выражениями
Logical && operator	Рендеринг или нет в зависимости от условия	Когда вам нужно рендерить что-то только если истинно
Switch statement	Множество различных случаев	Когда у вас есть несколько конкретных условий для проверки
Conditional component rendering	Условное рендеринг целых компонентов	Когда разные типы пользователей нуждаются в разных интерфейсах
Object-based rendering	Использование объектов для отображения условий	Когда у вас есть много разных страниц/компонентов для рендеринга
HOCs for conditional rendering	Обертывание компонентов условной логикой	Когда вы хотите повторно использовать условную логику в компонентах

Credits: Image by storyset