Фабричный метод в React: эффективное создание компонентов. Часть 1

461119af84d99c926737383ed7eff6fe.png

Привет всем! Я Мыльников Кирилл, frontend-разработчик в компании Usetech. Сегодня хочу поделиться примером реализации фабричного метода во фронтенде и объяснить, когда и где его следует применять. Освежим память о паттернах и роли, которую они играют в проектах.

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

Давайте по классике начнем с определений, вспомним, что такое паттерны и фабричный метод.

Что такое паттерн?

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

Что такое «Фабричный метод»?

Фабричный метод — это порождающий паттерн проектирования, который определяет общий интерфейс для создания объектов в суперклассе, позволяя подклассам изменять тип создаваемых объектов.

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

Давайте теперь все это адаптируем под наш проект на React.

Фабричный метод в React

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

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

Реализация фабричного метода в React

Будем использовать для тестовых данных вот этот сервис DummyJSON.

Вот ссылка на codesandbox с примером. В первом случае список отображается там, где могут возникнуть проблемы при внедрении или изменении логики в дальнейшем, а во втором — применен паттерн «Фабричный метод». Мы получаем список продуктов и выводим их, но при различных категориях нам приходится настраивать каждую карточку индивидуально.

Компонент становится сложным и трудночитаемым из-за условий, и изменения могут нарушить логику других категорий, но это можно исправить с помощью паттерна «Фабричный метод».

Пример

const Product = ({ product }: IProductProps) => {
  return (
    
  • thumbnail
    {product.category !== "beauty" && (

    {product.title}

    )}

    ${product.price}

    {product.category === "groceries" && (

    {product.description}

    )} {product.category === "fragrances" && (

    Условия возврата: {product.returnPolicy}

    )}
  • ); }; export default Product;

    Вот наша вторая реализация, где мы применяем паттерн «Фабричный метод». Это позволяет нам легко вносить изменения и настраивать каждую карточку в зависимости от категории. Теперь мы можем без проблем изменять логику для каждого типа продукта, и никакие изменения не затронут другие категории. Не забываем, что можно перейти по ссылке и посмотреть пример полностью — codesandbox.

    Пример

    import { IProducts } from "../../../../typings";
    import BeatuProduct from "./BeautyProduct";
    import GroceriesProduct from "./GroceriesProduct";
    import FragrancesProduct from "./FragrancesProduct";
    
    interface IProductFactoryProps {
      product: IProducts;
    }
    
    const ProductFactory = ({ product }: IProductFactoryProps) => {
      switch (product.category) {
        case "beauty":
          return ;
        case "groceries":
          return ;
        case "fragrances":
          return ;
        default:
          return null;
      }
    };
    
    export default ProductFactory;

    Еще один наглядный пример использования фабричного метода это UI — компоненты, допустим у нас в проекте есть кнопка, которая может выглядеть по-разному в различных частях интерфейса — с разными цветами и темами. В рассмотренном примере ниже мы видим, что в зависимости от типа кнопки мы отображаем конкретный компонент кнопки со своими стилями и свойствами. Благодаря использованию паттерна «Фабричный метод», нам легко и просто настраивать кнопку под нужды проекта и в любой момент заменять ее другой кнопкой с новым типом или добавить новый тип и настроить через новый компонент, реализация тут — codesanbox.

    Пример

    import DangerButton from "./DangerButton";
    import PrimaryButton from "./PrimaryButton";
    
    export interface IButtonProps {
      type: "primary" | "danger";
      title: string;
      onClick?: () => void;
    }
    
    const Button = ({ type, title, onClick }: IButtonProps) => {
      switch (type) {
        case "primary":
          return ;
        case "danger":
          return ;
        default:
          return null;
      }
    };
    
    export default Button;

    Паттерны, включая «Фабричный метод» помогают нам писать более гибкий и предсказуемый код, который легко поддается изменениям и расширению. Применение паттернов важно для создания высококачественного и хорошо структурированного программного обеспечения.

    Материалы

    Паттерны — Каталог паттернов проектирования (refactoringguru.cn)

    Codesanbox — ProductFactory.tsx — sandbox — CodeSandbox

    © Habrahabr.ru