От условного рендеринга до деструктуризации — разбираем приемы, которые сделают ваш код более профессиональным и поддерживаемым.
Этот материал взят из нашей еженедельной email-рассылки, посвященной фронтенду. Подпишитесь, чтобы быть в числе первых, кто получит дайджест.
(function () { let link = document .getElementById ("91df5d2b-d014-46a2-a4c2-a9afad623dc5-https://proglib.io/w/4dba58a3-2"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();
Условный рендеринг с оператором &&
Вместо полной if-конструкции можно использовать логический оператор &&, чтобы отобразить компонент только при выполнении определенного условия. Здесь компонент LogoutButton отобразится только тогда, когда isLoggedIn равен true.
Деструктуризация пропсов и состояния
Этот способ упрощает доступ к значениям из props и state, делая код более лаконичным:
Сокращенный синтаксис фрагментов
Чтобы не оборачивать элементы в лишние div, используйте фрагменты. Этот пример добавляет элементы без создания дополнительных тегов в DOM.
Статья по теме
🧩⚛️ React + структуры данных = суперкод: 7 примеров для практики
Стрелочные функции в обработчиках событий
Стрелочные функции позволяют избегать использования .bind(this) в конструкторах, а также избавляют от создания экземпляра функции при каждом рендере, что положительно сказывается на производительности объемных компонентов:
Функциональные компоненты
Это упрощенная форма создания компонентов, не использующих методы жизненного цикла:
Опциональная цепочка (?.)
Позволяет безопасно обращаться к вложенным свойствам объекта без проверки на null или undefined на каждом уровне:
👨💻🎨 Библиотека фронтендера
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»
Оператор распространения
Позволяет передать все пропсы в компонент без необходимости перечислять их вручную:
Оператор нулевого слияния (??)
Устанавливает значение по умолчанию, если пропс равен null или undefined:
Значения по умолчанию в параметрах функций
Можно задать значение по умолчанию для пропсов прямо в параметрах функции:
Короткая запись через логическое ИЛИ (||) для значений по умолчанию
Используйте оператор ||, чтобы задать значение по умолчанию, если переменная имеет ложное значение:
Шаблонные литералы для динамических классов
Позволяют легко динамически присваивать CSS-классы в зависимости от условий:
Статья по теме
⚛️ 6 самых важных шаблонов проектирования в React
Инлайн стили на основе условий
Стили можно менять динамически прямо в коде, используя объект:
Динамические ключи в литералах объектов
Можно создавать объекты с переменными ключами:
Метод .map() для рендеринга списков
Используйте .map() для эффективного рендеринга списков компонентов:
Тернарный оператор для условного рендеринга
Это лаконичная альтернатива if-else для рендеринга компонентов:
Логическое ИЛИ (||) для значений по умолчанию
Позволяет задать резервные значения в случае, если основной параметр имеет ложное значение:
Деструктуризация в параметрах функций
Можно деструктурировать пропсы прямо в параметрах функции:
Сокращенные имена свойств объектов
Если имя переменной совпадает с именем свойства объекта, можно использовать сокращенную запись:
Деструктуризация массивов
Позволяет легко извлекать значения из массива:
Псевдонимы для импортов
Можно переименовать импортируемый компонент или модуль, чтобы избежать конфликтов или добавить ясности в код:
Какими ещё приёмами для улучшения React-кода вы пользуетесь в своей практике?"
***
🚀 Для тех, кто хочет войти во frontend-разработку
Собрали курс Frontend Basic, где только практика и реальные кейсы:
- 26 видеоуроков от действующих разработчиков Газпромбанка и Аэрофлота
- Создадите 4 полноценных проекта для портфолио
- Освоите стек: HTML, CSS, JavaScript, React, Git
- Формат: 2 месяца обучения в своем темпе
- Пожизненный доступ к материалам
Особенность курса — фокус на практике: каждую технологию изучаете на реальных задачах, которые встречаются в работе.
(function () { let link = document .getElementById ("91df5d2b-d014-46a2-a4c2-a9afad623dc5-https://proglib.io/w/de8817d0-72"); if (! link) return; let href = link .getAttribute ("href"); if (! href) return; let prefix = link .dataset .prefix; let action = link .dataset .action; link .addEventListener ("click", function (e) { let data = new FormData (); data .append ("url", href); apiFetch (action, { method: "POST", body: data }) .then (function (res) {}) .catch (function (err) { console .error (err); }); }) })();
