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

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

Так что устраивайтесь поудобнее и давайте рассмотрим десять однострочников React, которые позволят вам кодить умнее, а не сложнее. Готовы? Приступаем!

1. Условный рендеринг

Давайте начнем с классического сценария React: условного рендеринга. Это когда вы хотите показать что-то только при выполнении определенного условия. Традиционно для этого используется оператор if или тернарный оператор. Но посмотрите на это:

{condition && }

Тут используется логический оператор AND (&&) для отображения компонента только в том случае, если условие истинно. Этот код прост, чист и выполняет свою работу без лишних хлопот.

Как это работает?

Красота этого однострочника заключается в том, как JavaScript оценивает логические выражения. Если условие перед && ложно, то все выражение ложно, и React ничего не отображает. Но если оно истинно, React переходит к оценке того, что идет после && (в данном случае — наш компонент).

Когда это использовать?

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

2. Пропсы по умолчанию

Далее поговорим о пропсах по умолчанию. Все мы знаем, как важно обрабатывать случаи, когда компоненту могут быть не переданы данные (пропсы). Обычный способ обработки заключается в установке defaultProps или использовании параметров по умолчанию в сигнатуре функции. Но вот быстрый однострочник для подобных задач:

const {prop = defaultValue} = props;

В этой строке используется деструктурирующее присваивание со значением по умолчанию. Если prop не определен в props, будет использоваться defaultValue.

Почему это здорово?

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

Пример из реального мира

Представьте, что вы создаете компонент Button, который может иметь разные размеры. Вы можете использовать его следующим образом:

const Button = ({ size = 'medium', children }) => {
  return {children};
};

Теперь, если кто-то воспользуется вашей кнопкой, не указав ее размер, по умолчанию size будет иметь значение «medium». Неплохо, правда?

3. Обновление состояния

Управление состоянием — важная часть React-разработки. Иногда бывает необходимо обновить состояние, основываясь на его предыдущем значении. Вот однострочник, который позволяет сделать это без труда:

setCount(prevCount => prevCount + 1);

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

Магия, которая за этим стоит

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

Когда следует прибегать к этому методу?

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

4. Манипуляции с массивами

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

setItems(prevItems => [...prevItems, newItem]);

С помощью оператора spread создается новый массив со всеми предыдущими элементами и новым элементом в конце.

Почему это важно?

В React неизменяемость является ключевым фактором производительности и предсказуемости. Этот однострочник гарантирует, что вы создаете новый массив, а не изменяете существующий, а это именно то, что нужно React.

Практическое применение

Допустим, вы создаете приложение для составления списка задач. Вы можете использовать этот однострочник для обновления состояния при добавлении новой задачи пользователем:

const addTask = (newTask) => {
  setTasks(prevTasks => [...prevTasks, newTask]);
};

Просто, чисто и эффективно!

5. Обновление объектов

Как и в случае с массивами, обновление объектов в состоянии — распространенная операция в React. Вот однострочник, который позволяет обновлять определенные свойства объекта, не изменяя оригинал:

setUser(prevUser => ({ ...prevUser, name: 'New Name' }));

С помощью оператора spread создается новый объект со всеми свойствами предыдущего, но свойство 'name' перезаписывается новым значением.

В чем красота?

Такой подход сохраняет неизменяемость, позволяя обновлять только те свойства, которые вам нужны. Это все равно что сказать: «Оставь все прежним, за исключением этих конкретных изменений».

Когда вам это пригодится?

Этот способ хорош, когда вы имеете дело с формами или любым другим сценарием, в котором вам нужно обновить часть объекта на основе пользовательского ввода или других событий.

6. Рефы обратного вызова

Рефы в React очень полезны для прямого доступа к элементам DOM. Вот однострочник, который устанавливает обратный вызов ref:

 node && node.focus()} />

Это создает элемент ввода, который автоматически фокусируется при рендеринге.

Как это работает?

Обратный вызов ref получает узел DOM в качестве аргумента. Однострочник проверяет, существует ли этот узел (чтобы избежать ошибок, если ref равен null), а затем вызывает метод focus для него.

Идеальный случай использования

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

7. Стиль

Встроенные стили в React иногда могут быть несколько многословными. Вот однострочник, делающий их более краткими:

Здесь используется объектный литерал для определения нескольких стилей в одной строке.

Почему это круто?

Хотя мы обычно предпочитаем классы CSS для стилей, бывают случаи, когда встроенные стили необходимы или удобны. Этот однострочник позволяет сохранить ваш JSX чистым и читаемым.

Когда использовать?

Применение такого однострочника особенно полезно для динамических стилей, которые меняются в зависимости от реквизитов или состояния, или для быстрого прототипирования, когда вы не хотите создавать отдельный CSS-файл.

8. Имя класса

Условные имена классов — распространенный паттерн в React. Вот однострочник, упрощающий этот процесс:

Здесь используется шаблонный литерал и тернарный оператор для условного добавления класса.

В чем тут соль?

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

Реальный сценарий использования

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

9. Error Boundary

Предохранители (error boundary) — важнейшая часть надежных React-приложений. Вот однострочник, создающий простой предохранитель:

class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError = () => ({ hasError: true }); render = () => this.state.hasError ? 
Something went wrong.
 : this.props.children; }

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

Разбиваем однострочник на части

Этот однострочник определяет класс компонента с состоянием для отслеживания ошибок, статический метод для обновления состояния при возникновении ошибки и метод рендеринга, который либо показывает сообщение об ошибке, либо отображает дочерние элементы обычным способом.

Когда это пригодится?

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

10. Memo

И напоследок давайте рассмотрим однострочник для мемоизации функциональных компонентов:

const MemoizedComponent = React.memo(({ prop1, prop2 }) => 
{prop1} {prop2}
);

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

Волшебство

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

Наилучшее использование

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

Заключение

Ну вот и все, друзья! Мы рассмотрели десять мощных однострочников React, которые сделают ваш код чище и эффективнее. От условного рендеринга до предохранителей — эти компактные фрагменты кода имеют большой потенциал.

Помните, что, несмотря на всю свою привлекательность, однострочники не всегда являются наилучшим решением для любого сценария. Главное — понять, как они работают и когда их использовать. Как и во всем, что касается кодинга, читабельность и поддерживаемость должны быть вашими главными приоритетами.

Перевод статьи “10 React One-Liners Every UI Developer Should Know”.

Запись 10 однострочников React, которые должен знать каждый UI-разработчик впервые появилась techrocks.ru.