Шаблоны проектирования React
В FlexClub наша фронтенд-команда использует React.js для создания наших пользовательских интерфейсов. React гибкий и мощный. Его компонентная модель допускает набор абстракций и шаблонов, которые можно использовать для разработки широкого спектра веб-приложений. В этой статье я делюсь рядом известных и нестандартных шаблонов, которые мы приняли в FlexClub.
Что такое шаблоны проектирования?
Не существует единого автономного определения того, что такое шаблон проектирования, но для целей этой статьи шаблонами проектирования являются:
Повторяющиеся решения часто встречающихся проблем при проектировании программного обеспечения.
Наша цель — создавать код, который прост в использовании, легко поддерживается и имеет высокое качество, определяет, как мы пишем код и строим абстракции. Это привело нас к разработке ряда шаблонов, некоторые из которых представлены ниже.
Реагировать на крючки
Функция хуков React была хорошо принята как улучшение традиционных методов состояния и жизненного цикла. Хуки — это повторно используемые функции, которые реализуют общие функции, часто необходимые в приложениях React. Как сказано в официальной React docs:
Они позволяют использовать состояние и другие функции React без написания класса.
React поставляется со встроенными хуками, такими как useState для управления состоянием приложения и useEffect, выполняющим ту же функцию, что и традиционные методы жизненного цикла React, но объединенными в единый API. Привлекательность хуков React для нашей команды заключается в том, что они упрощают выборку данных, управление состоянием и могут повторно использоваться для создания пользовательских хуков.
Мы в FlexClub обнаружили, что хуки значительно улучшают качество нашего кода и удобство сопровождения. Мы постоянно добавляем в нашу растущую коллекцию настраиваемых хуков для управления формами, унифицированного извлечения данных API, локализации, управления модальными окнами, запуска A/B-тестов и многого другого.
Презентационные компоненты
Презентационные компоненты, также известные как компоненты без состояния или чистые компоненты, должны получать данные только в качестве реквизита и отображать их.
Такие компоненты можно многократно использовать, поскольку они не зависят от какого-либо внутреннего состояния или переменной. Подобно чистым функциям, презентационные компоненты предсказуемы и легко тестируются, поскольку они всегда будут отображать одно и то же при предоставлении одних и тех же данных.
Мы принимаем этот шаблон для компонентов, которые мы часто используем повторно, таких как макеты, виджеты и служебные компоненты, чтобы их можно было повторно использовать, компоновать и тестировать, насколько это возможно.
Компоненты контейнера
Как следует из названия, контейнеры содержат дочерние компоненты. Родительский компонент извлекает данные, управляет состоянием приложения и выполняет бизнес-логику. Затем передает полученные данные дочернему компоненту.
Несмотря на то, что компоненты-контейнеры в паре с презентационными компонентами являются широко используемым шаблоном, это не единственный вариант использования. Этот шаблон обычно служит способом абстрагирования деталей реализации от дочерних компонентов, независимо от того, являются ли они презентационными или нет.
Самодокументирующиеся функции
Хотя это и не является строго специфичным шаблоном React, мы находим деструктурирование опор React и деструктурирование объектов в современном Javascript очень удобным синтаксическим сахаром для улучшения читабельности кода. Это также вдохновлено именованными аргументами в таких языках программирования, как PHP, Python, Kotlin и C#.
Одним из вариантов использования деструктуризации объектов является самодокументирование параметров функций. В нашем случае функции, которые принимают 3 или более аргументов, используют деструктурирование объектов, чтобы разработчикам было проще использовать их правильно, и избежать распространенной ошибки, связанной с отсутствием правильного порядка параметров:
Заключение
Это лишь некоторые из шаблонов, которые мы используем в FlexClub. Если вы хотите копнуть глубже, я рекомендую электронную книгу React Patterns для краткого и лаконичного списка шаблонов, которые вы можете найти полезными в своем приложении или команде.
