Пример использования структурных шаблонов в React.js?

Question

[Владислав Мороз]

Жизненные ситуации, когда использовали структурные шаблоны (декоратор, фабрика, медиатор, фасад, обсервер, синглтон и т.д.) при разработке на React.js.
Буду благодарен за примеры кода, или же описания задачи/решения.

Answer 1

[Mikhail Osher]

Декоратор. Многие HOC являются декораторами/прокси.

Фасад. В мире React фасадами я бы назвал селекторы. Мы прячем комплексную структуру стора (причем, неважно, что используется - flux, redux, context, whatever) за простыми функциями-геттерами. Это могут быть как обычные геттеры, так и вычисляемые значения.

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

Обсервер. Тот же HOC connect из react-redux, по сути, является обсервером. Изменился mapState - ре-рендер компонента.

Адаптер. Можно поверх сложных UI элементов (range, datepicker, etc..) писать еще свои адаптеры, которые будут иметь определенный программный интерфейс. Это позволит менять сторонние библиотеки (мало ли, автор забросит поддержку), сохранив при этом программный интерфейс внутри приложения.

В самом React еще другие паттерны. Например, slot pattern, render props.

Answer 2

[Иван Васильев]

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

Например, декораторы и обсервер используются при управлении state через mobx, но не обязательно этот стейт рендерить с помощью React при этом.

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