5 продвинутых паттернов React-разработки

5 продвинутых паттернов React-разработки

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

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

Компонент Counter будет реализован пятью разными способамиКомпонент Counter будет реализован пятью разными способами

Для каждого шаблона будет небольшое введение, реальный вариант использования (со ссылкой на GitHub, где вы найдете и примеры реализации) и разбор плюсов и минусов. Затем подведем небольшой итог и выставим оценки по двум критериям:

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

Также посмотрим, какие публичные библиотеки React уже используют тот или иной паттерн.

Паттерн #1. Составные компоненты

Пример использования

Плюсы

Уменьшается сложность API

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

5 продвинутых паттернов React-разработки

Гибкая структура разметки

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

5 продвинутых паттернов React-разработки

Разделение ответственности

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

5 продвинутых паттернов React-разработки

Минусы

Слишком большая гибкость пользовательского интерфейса

Гибкость – это не всегда хорошо. Без должного контроля, она может привести к изменению интерфейса или даже поломке компонента. Например, ничто не мешает пользователю добавить дополнительный элемент или, наоборот, забыть что-то важное (подкомпонент или параметр).

Уровень гибкости, который вы готовы предоставить пользователю, зависит от многих аспектов. Иногда большая свобода не требуется.

5 продвинутых паттернов React-разработки

Громоздкая разметка

Очевидно, что количество строк разметки существенно увеличивается, ведь каждый элемент представлен отдельным компонентом, а не спрятан внутри родителя. Особенно это чувствуется при использовании линтеров (ESLint) или форматировщиков кода (Prettier).

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