⚛️🧹 React без воды: 20 техник чистого кода
От условного рендеринга до деструктуризации — разбираем приемы, которые сделают ваш код более профессиональным и поддерживаемым.
Условный рендеринг с оператором &&
Вместо полной if-конструкции можно использовать логический оператор &&, чтобы отобразить компонент только при выполнении определенного условия. Здесь компонент LogoutButton отобразится только тогда, когда isLoggedIn равен true.
{isLoggedIn && <LogoutButton />}
Деструктуризация пропсов и состояния
Этот способ упрощает доступ к значениям из props и state, делая код более лаконичным:
const { value } = props;
const { user, isLoggedIn } = this.state;
Сокращенный синтаксис фрагментов
Чтобы не оборачивать элементы в лишние div, используйте фрагменты. Этот пример добавляет элементы без создания дополнительных тегов в DOM.
<> <ComponentA /> <ComponentB /> </>
Стрелочные функции в обработчиках событий
Стрелочные функции позволяют избегать использования .bind(this) в конструкторах, а также избавляют от создания экземпляра функции при каждом рендере, что положительно сказывается на производительности объемных компонентов:
<button onClick={() => this.handleClick()}>Click</button>
Функциональные компоненты
Это упрощенная форма создания компонентов, не использующих методы жизненного цикла:
const Welcome = ({ name }) => <h1>Hello, {name}</h1>;
Опциональная цепочка (?.)
Позволяет безопасно обращаться к вложенным свойствам объекта без проверки на null или undefined на каждом уровне:
const name = props.user?.name;
Оператор распространения
Позволяет передать все пропсы в компонент без необходимости перечислять их вручную:
<MyComponent {...props} />
Оператор нулевого слияния (??)
Устанавливает значение по умолчанию, если пропс равен null или undefined:
const username = props.username ?? 'Guest';
Значения по умолчанию в параметрах функций
Можно задать значение по умолчанию для пропсов прямо в параметрах функции:
const MyComponent = ({ prop = 'default' }) => <div>{prop}</div>;
Короткая запись через логическое ИЛИ (||) для значений по умолчанию
Используйте оператор ||, чтобы задать значение по умолчанию, если переменная имеет ложное значение:
const value = props.value || 'default';
Шаблонные литералы для динамических классов
Позволяют легко динамически присваивать CSS-классы в зависимости от условий:
const className = `btn ${isActive ? 'active' : ''}`;
Инлайн стили на основе условий
Стили можно менять динамически прямо в коде, используя объект:
const style = { color: isActive ? 'red' : 'blue' };
Динамические ключи в литералах объектов
Можно создавать объекты с переменными ключами:
const key = 'name';
const obj = { [key]: 'value' };
Метод .map() для рендеринга списков
Используйте .map() для эффективного рендеринга списков компонентов:
const listItems = items.map(item => <li key={item.id}>{item.name}</li>);
Тернарный оператор для условного рендеринга
Это лаконичная альтернатива if-else для рендеринга компонентов:
const button = isLoggedIn ? <LogoutButton /> : <LoginButton />;
Логическое ИЛИ (||) для значений по умолчанию
Позволяет задать резервные значения в случае, если основной параметр имеет ложное значение:
const displayName = user.name || 'Guest';
Деструктуризация в параметрах функций
Можно деструктурировать пропсы прямо в параметрах функции:
const MyComponent = ({ prop1, prop2 }) => <div>{prop1} {prop2}</div>;
Сокращенные имена свойств объектов
Если имя переменной совпадает с именем свойства объекта, можно использовать сокращенную запись:
const name = 'John';
const user = { name };
Деструктуризация массивов
Позволяет легко извлекать значения из массива:
const [first, second] = array;
Псевдонимы для импортов
Можно переименовать импортируемый компонент или модуль, чтобы избежать конфликтов или добавить ясности в код:
import { Component as MyComponent } from 'library';
Какими ещё приёмами для улучшения React-кода вы пользуетесь в своей практике?"
🚀 Для тех, кто хочет войти во frontend-разработку
Собрали курс Frontend Basic, где только практика и реальные кейсы:
- 26 видеоуроков от действующих разработчиков Газпромбанка и Аэрофлота
- Создадите 4 полноценных проекта для портфолио
- Освоите стек: HTML, CSS, JavaScript, React, Git
- Формат: 2 месяца обучения в своем темпе
- Пожизненный доступ к материалам
Особенность курса — фокус на практике: каждую технологию изучаете на реальных задачах, которые встречаются в работе.