5 способов писать условные выражения Better React
Правильно ли вы пишете условные выражения в своих приложениях React?
Хорошие условные выражения - неотъемлемая часть любого приложения React. Мы используем условные выражения, чтобы отображать или скрывать элементы или компоненты в наших приложениях.
Короче говоря, чтобы быть эффективным разработчиком React, вы должны уметь писать хорошие условные выражения.
Давайте рассмотрим все основные шаблоны, которые вам нужно знать, чтобы писать четкие и лаконичные условные выражения, а также то, каких анти-шаблонов вам следует избегать.
Хотите свою копию? 📄
Загрузите шпаргалку в формате PDF здесь (занимает 5 секунд).
Вот несколько быстрых побед от загрузки загружаемой версии:
- Краткое справочное руководство для просмотра в любое время и в любое время
- Тонны копируемых фрагментов кода для удобного повторного использования
- Прочтите это обширное руководство в любом удобном для вас месте. В поезде, за столом, в очереди… где угодно.
Есть много чего интересного, так что приступим.
1. Используйте в первую очередь операторы if. Нет необходимости в else или else-if.
Начнем с самого простого типа условных выражений в React. Если у нас есть данные, мы хотим их отобразить. В противном случае мы ничего не хотим показывать.
Простой! Как бы мы это написали?
Допустим, мы получаем массив данных о записях из API. Когда он получает данные, posts имеет значение undefined.
Мы можем проверить это значение с помощью простого оператора if.
export default function App() {
const { posts } = usePosts(); // posts === undefined at first
if (!posts) return null;
return (
<div>
<PostList posts={posts} />
</div>
);
}Причина, по которой этот шаблон работает, в том, что мы возвращаемся раньше срока. Если он соответствует условию (если !posts имеет логическое значение true), мы ничего не отображаем в нашем компоненте, возвращая null.
Операторы If также работают, когда у вас есть несколько условий, которые вы хотите проверить.
Например, если вы хотите проверить состояние загрузки и ошибки перед отображением данных:
export default function App() {
const { isLoading, isError, posts } = usePosts();
if (isLoading) return <div>Loading...</div>;
if (isError) return <div>Error!</div>;
return (
<div>
<PostList posts={posts} />
</div>
);
}Обратите внимание, что мы можем повторно использовать оператор if, и нам не нужно писать if-else или if-else-if, что сокращает объем кода, который мы должны писать, и при этом остается таким же читаемым.
2. Используйте тернарный оператор для написания условных выражений в вашем JSX.
Операторы if хороши, когда мы хотим выйти раньше и не отображать ничего или совершенно другой компонент.
Однако что, если мы хотим писать условное выражение не отдельно от возвращенного JSX, а непосредственно внутри него?
В React мы должны включать выражения (то, что разрешается в значение), а не операторы в наш JSX.
Вот почему мы должны писать условные выражения в нашем JSX только с тернариями, а не с операторами if.
Например, если мы хотим отобразить один вложенный компонент на экране размером с мобильный телефон, а другой - на большом экране, тройной компонент будет идеальным выбором:
function App() {
const isMobile = useWindowSize()
return (
<main>
<Header />
<Sidebar />
{isMobile ? <MobileChat /> : <Chat />}
</main>
)
}Большинство разработчиков думают, что это единственный шаблон, который они могут использовать, когда дело доходит до использования троичных файлов.
Фактически, вам не нужно загромождать дерево компонентов, включая все эти тернарии непосредственно в возвращенный JSX.
Поскольку тернарные числа преобразуются в значение, помните, что вы можете присвоить результат тернарного типа переменной, которую затем можете использовать там, где вам нравится:
function App() {
const isMobile = useWindowSize();
const ChatComponent = isMobile ? <MobileChat /> : <Chat />;
return (
<main>
<Header />
<Sidebar />
{ChatComponent}
</main>
)
}3. Никаких других условий? Используйте оператор && (и)
Во многих случаях вы захотите использовать тернар в своем JSX, но поймете, что если это условие не выполняется, вы не хотите ничего отображать.
Этот троичный элемент будет выглядеть следующим образом: condition ? <Component /> : null.
Если у вас нет условия else, используйте оператор &&:
export default function PostFeed() {
const { posts, hasFinished } = usePosts()
return (
<>
<PostList posts={posts} />
{hasFinished && (
<p>You have reached the end!</p>
)}
</>
)
}4. Операторы переключения для нескольких условий.
Что, если мы находимся в ситуации, когда у нас много разных состояний, а не одно или два?
Конечно, мы могли бы написать несколько операторов if, но все эти операторы if, как мы видели ранее, идут выше нашего возвращенного JSX.
Слишком много операторов if могут загромождать наши компоненты. Как сделать наш код чище?
Часто мы можем выделить несколько условий в отдельный компонент, содержащий оператор switch.
Например, у нас есть компонент «Меню», с помощью которого мы можем переключать и отображать различные вкладки.
У нас есть вкладки, которые могут отображать данные пользователя, чата и комнаты, как вы видите ниже:
export default function Menu() {
const [menu, setMenu] = React.useState(1);
function toggleMenu() {
setMenu((m) => {
if (m === 3) return 1;
return m + 1;
});
}
return (
<>
<MenuItem menu={menu} />
<button onClick={toggleMenu}>Toggle Menu</button>
</>
);
}
function MenuItem({ menu }) {
switch (menu) {
case 1:
return <Users />;
case 2:
return <Chats />;
case 3:
return <Rooms />;
default:
return null;
}
}Поскольку мы используем специальный компонент MenuItem с оператором switch, наш родительский компонент Menu не загроможден условной логикой, и мы можем легко увидеть, какой компонент будет отображаться с учетом состояния menu.
5. Хотите условные выражения в качестве компонентов? Попробуйте операторы управления JSX
Очень полезно иметь возможность использовать простой JavaScript в наших компонентах React. Но если вам нужны еще более декларативные и простые условные выражения, обратите внимание на управляющие операторы JSX библиотеки React.
Вы можете добавить его в свои проекты React, выполнив следующую команду:
npm install --save-dev babel-plugin-jsx-control-statementsКроме того, вы можете указать его в своем файле .babelrc следующим образом:
{
"plugins": ["jsx-control-statements"]
}Это плагин Babel, который позволяет вам использовать компоненты React непосредственно в вашем JSX для написания очень простых для понимания условных выражений.
Лучший способ понять использование такой библиотеки - взглянуть на пример. Давайте перепишем один из наших предыдущих примеров с помощью управляющих операторов JSX:
export default function App() {
const { isLoading, isError, posts } = usePosts();
return (
<Choose>
<When condition={isLoading}>
<div>Loading...</div>
</When>
<When condition={isError}>
<div>Error!</div>
</When>
<Otherwise>
<PostList posts={posts} />
</Otherwise>
</Choose>
);
}Вы можете видеть, что в поле зрения нет оператора if или тернарного оператора, и у нас есть очень удобочитаемая структура компонентов.
Попробуйте операторы управления JSX в своем следующем проекте React и посмотрите, подходит ли вам такая библиотека.
Что дальше?
Я надеюсь, что это руководство дало вам несколько полезных шаблонов для написания отличных условных выражений React.
Если вы хотите сохранить копию этой шпаргалки для учебных целей, вы можете скачать полную версию этой шпаргалки в формате PDF здесь.
Также ознакомьтесь с этими основными ресурсами, которые помогут поднять ваши навыки React на новый уровень, в том числе:
