artbyrasen
@artbyrasen
Front-end разработчик

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

Жизненные ситуации, когда использовали структурные шаблоны (декоратор, фабрика, медиатор, фасад, обсервер, синглтон и т.д.) при разработке на React.js.
Буду благодарен за примеры кода, или же описания задачи/решения.
  • Вопрос задан
  • 1651 просмотр
Решения вопроса 1
miraage
@miraage
Старый прогер
Декоратор. Многие HOC являются декораторами/прокси.

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

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

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

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

В самом React еще другие паттерны. Например, slot pattern, render props.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
konclave
@konclave
Зол, жаден, коварен, злопамятен.
С моей точки зрения немного странный вопрос, потому что "в разработке на React" можно отсюда убрать и вставить любой фреймворк или просто оставить "в разработке".

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект
18 апр. 2024, в 21:56
2000 руб./за проект