🔥Лучшие практики шаблона React Builder, которые знают только профессионалы React 🧱

Изучите шаблон Builder, который упрощает создание сложных объектов и повышает гибкость ваших компонентов.

Содержание

• Что такое Builder Pattern в контексте React
• Каковы реальные примеры использования Builder Patterns в React
• Сценарий использования 1: как создать конструктор форм в React с использованием шаблона Builder
• Сценарий использования 2. Как использовать шаблон Builder в React для создания компонентов со сложными свойствами
• Сценарий использования 3. Как использовать Builder Pattern в React HOC и нужно ли это делать
• Каковы лучшие практики использования шаблона Builder в React
• Подробнее

Что такое Builder Pattern в контексте React

Привет, разработчики, сегодня мы изучим роль Builder Pattern в дизайне приложений React. Шаблон строителя – это творческий шаблон проектирования, позволяющий шаг за шагом создавать сложные объекты. Это полезно при настройке процесса создания объекта и позволяет избежать создания больших конструкторов или объектов параметров. Отделив конструкцию объекта от его представления, вы можете создавать разные представления одного и того же объекта.

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

Каковы реальные примеры использования Builder Patterns в React?

Итак, каковы реальные примеры использования шаблона Builder в React?

• Что ж, вы можете сделать одну интересную вещь — создать действительно сложные формы с различными типами входных данных, проверок и стилей. Вы можете использовать компонент Form Builder, который принимает различные входные компоненты в качестве свойств и отображает их с соответствующей логикой и макетом. Это значительно упрощает создание и обслуживание сложных форм!
• Другой вариант использования шаблона Builder — создание неизменяемых объектов с большим количеством необязательных параметров. Это может показаться немного сложным, но это просто означает, что вы можете использовать компонент User Builder для установки различных свойств объекта пользователя (имя, адрес электронной почты, пароль, роль и т. д.) и вернуть новый объект пользователя с этими свойствами. Это упрощает создание пользовательских объектов с множеством различных свойств без необходимости написания тонны кода.
• Наконец, вы можете использовать шаблон Builder для создания компонентов многократного использования, которые можно настраивать для различных сценариев. Например, вы можете использовать компонент Card Builder, который позволяет настраивать содержимое, верхний и нижний колонтитулы и стиль компонента карты и отображать их соответствующим образом. Это очень полезно, когда вы хотите повторно использовать один и тот же компонент во многих разных местах, но вам нужно, чтобы он выглядел и вел себя по-разному.

Вариант использования 1: как создать конструктор форм в React с использованием шаблона Builder

Создание Form Builder — самый классический пример использования Builder Pattern в реальном мире в веб-дизайне. В React это будет удобно, если нам нужно динамически создавать формы на основе конфигурации. Давайте посмотрим на пример:

import React from "react";

interface FormField {
  name: string;
  label: string;
  type: "text" | "password" | "email";
  required: boolean;
  value: string;
}

interface FormProps {
  fields: FormField[];
  onSubmit: (data: any) => void;
}

class FormBuilder {
  private fields: FormField[];

  constructor() {
    this.fields = [];
  }

  addField(name: string, label: string, type: "text" | "password" | "email") {
    this.fields.push({
      name,
      label,
      type,
      required: false,
      value: ""
    });

    return this;
  }

  makeRequired() {
    const lastField = this.fields[this.fields.length - 1];

    if (lastField) {
      lastField.required = true;
    }

    return this;
  }

  build(submitCallback): FormProps {
    return {
      fields: this.fields,
      onSubmit: submitCallback
    };
  }
}

function Form(props: FormProps) {
  const { fields, onSubmit } = props;

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    const formData = Object.fromEntries(new FormData(event.currentTarget));

    onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {fields.map(field => (
        <div key={field.name}>
          <label>
            {field.label}
            {field.required ? " *" : ""}
          </label>
          <input
            type={field.type}
            name={field.name}
            required={field.required}
            onChange={event => {
              field.value = event.currentTarget.value;
            }}
          />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}

function App() {
  const form = useRef(new FormBuilder()
    .addField("firstName", "First name", "text")
    .addField("lastName", "Last name", "text")
    .addField("email", "Email", "email")
    .makeRequired()
    .build((data: any) => {
        console.log("Form submitted with data:", data);
    }));

  return (
    <div>
      <h1>Sign up form</h1>
      <Form {...form.current} />
    </div>
  );
}

export default App;

В этом примере мы определяем два интерфейса: FormField для описания каждого поля в форме и FormProps для описания свойств, которые ожидает компонент формы.

Затем мы определяем FormBuilder class, который следует шаблону Builder. Класс FormBuilder имеет методы для добавления полей в форму, пометки последнего поля как обязательного и создания окончательных реквизитов формы. Используя класс для создания формы, мы можем сделать процесс более гибким и удобным в сопровождении.

В методе сборки FormBuilder мы определяем onSubmit, который генерирует submitCallback. submitCallbackfunction будет записывать данные формы в консоль. Это позволяет нам централизованно обрабатывать отправку форм и избегать повторения кода.

В компоненте приложения мы создаем новый экземпляр FormBuilder, добавляем в него три поля, помечаем последнее поле как обязательное и создаем реквизиты формы. Затем мы передаем свойства формы компоненту Form и визуализируем его. Используя вместе компоненты FormBuilder и Form, мы можем создать динамический и настраиваемый построитель форм, который можно использовать в различных контекстах.

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

Вариант использования 2. Как использовать шаблон Builder в React для создания компонентов со сложными свойствами

Позвольте мне также объяснить, как мы можем использовать шаблон Builder для упрощения создания пользовательского компонента с необязательными свойствами. Сначала посмотрите на пример:

import React from "react";

interface UserProps {
  firstName?: string;
  lastName?: string;
  email?: string;
  avatarUrl?: string;
}

class UserBuilder {
  private props: UserProps;

  constructor() {
    this.props = {};
  }

  withFirstName(firstName: string): UserBuilder {
    this.props.firstName = firstName;
    return this;
  }

  withLastName(lastName: string): UserBuilder {
    this.props.lastName = lastName;
    return this;
  }

  withEmail(email: string): UserBuilder {
    this.props.email = email;
    return this;
  }

  withAvatarUrl(avatarUrl: string): UserBuilder {
    this.props.avatarUrl = avatarUrl;
    return this;
  }

  build(): JSX.Element {
    return <User {...this.props} />;
  }
}

function User(props: UserProps) {
  return (
    <div>
      {props.avatarUrl && <img src={props.avatarUrl} alt="Avatar" />}
      {props.firstName && <p>{props.firstName}</p>}
      {props.lastName && <p>{props.lastName}</p>}
      {props.email && <p>{props.email}</p>}
    </div>
  );
}

function App() {
  const user1 = new UserBuilder().withFirstName("John").withEmail("[email protected]").build();
  const user2 = new UserBuilder().withFirstName("Jane").withLastName("Doe").withAvatarUrl("https://example.com/avatar.jpg").build();

  return (
    <div>
      {user1}
      {user2}
    </div>
  );
}

export default App;

Во-первых, мы определяем интерфейс UserProps, который содержит все необязательные свойства. Затем мы создаем класс User с этими свойствами в качестве параметров конструктора.

Чтобы создать объект User с шаблоном Builder, мы определяем класс UserBuilder с методами для каждого необязательного свойства. Эти методы устанавливают значение соответствующего свойства и возвращают сам экземпляр UserBuilder, чтобы разрешить цепочку. Наконец, мы определяем метод сборки, который возвращает новый объект User со значениями, установленными методами построителя.

Теперь, когда нам нужно создать компонент User с определенными свойствами, мы можем создать новый экземпляр класса UserBuilder, задать нужные свойства с помощью методов компоновщика и вызвать метод сборки, чтобы получить объект User. Затем мы можем передать этот объект User в качестве реквизита пользовательскому компоненту, который будет отображаться с предоставленными свойствами.

Использование шаблона Builder позволяет нам создавать экземпляры компонента User только с нужными свойствами, без необходимости передавать все возможные свойства в виде отдельных реквизитов. Это делает наш код более кратким и простым в обслуживании.

Вы можете спросить: зачем нам вообще создавать такую ​​цепочку свойств, если мы можем просто передать параметр как атрибут компонента?

Использование Builder Pattern даст вам некоторые преимущества, когда:

• с параметрами происходит некоторая логика, и вы хотите ее абстрагировать.
• нам нужно создать некоторые повторяющиеся компоненты, и, чтобы избежать увеличения вашего JSX, вы можете обернуть их в билдер.

Вариант использования 3. Как использовать Builder Pattern в React HOC и нужно ли это делать

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

Некоторые примеры HOC:

• connect из React Redux
• withRouter из React Router
• withTranslation из React i18next

Использование Builder Pattern определенно даст нам больше абстракции и удобочитаемости, но стоит ли это дополнительных усилий? Давайте посмотрим пример. Допустим, у нас есть логирующий HOC, который выводит информацию о упакованном компоненте на консоль. Мы хотим создать класс построителя, который позволит нам легко создавать экземпляры HOC с различными параметрами ведения журнала.

import React from "react";

interface LoggingOptions {
  logRender: boolean;
  logProps: boolean;
}

export function withLogging<P extends object>(
  Component: React.ComponentType<P>,
  loggingOptions: LoggingOptions
): React.ComponentType<P> {
  const { logRender, logProps } = loggingOptions;

  const componentName = Component.displayName || Component.name || "Component";

  return function WithLogging(props: P) {
    if (logRender) {
      console.log(`Rendering component: ${componentName}`);
    }

    if (logProps) {
      console.log(`Component props: ${JSON.stringify(props)}`);
    }

    return <Component {...props} />;
  };
}

interface HOCBuilderOptions {
  logRender: boolean;
  logProps: boolean;
}

class LoggingHOCBuilder {
  private options: HOCBuilderOptions;

  constructor() {
    this.options = {
      logRender: false,
      logProps: false,
    };
  }

  withLogRender(logRender: boolean): LoggingHOCBuilder {
    this.options.logRender = logRender;
    return this;
  }

  withLogProps(logProps: boolean): LoggingHOCBuilder {
    this.options.logProps = logProps;
    return this;
  }

  build<P extends object>(Component: React.ComponentType<P>): React.ComponentType<P> {
    return withLogging(Component, this.options);
  }
}

function MyComponent(props: { name: string }) {
  return (
    <div>
      Hello, {props.name}!
    </div>
  );
}

const LoggedMyComponent = new LoggingHOCBuilder()
  .withLogRender(true)
  .withLogProps(true)
  .build(MyComponent);

function App() {
  return (
    <div>
      <LoggedMyComponent name="Alice" />
      <LoggedMyComponent name="Bob" />
    </div>
  );
}

export default App;

Это уже выглядит великолепно, и Builder Pattern удовлетворил свои потребности, но он может заставить вашу интуицию почувствовать, что с этим что-то не так. И дело в том, что синтаксис не выглядит очень естественным и привычным для разработчиков React, особенно для тех, кто знаком с Decorators. Decorators позволяют обернуть что-либо (например, класс, метод, свойство и т. д.), чтобы изменить его поведение. В Typescript они имеют префикс @ и применяются к целевому компоненту. Давайте рассмотрим пример, чтобы увидеть разницу:

import React from "react";

interface LoggingOptions {
  logRender: boolean;
  logProps: boolean;
}

function withLogging<P extends object>(
  Component: React.ComponentType<P>,
  loggingOptions: LoggingOptions
): React.ComponentType<P> {
  const { logRender, logProps } = loggingOptions;

  const componentName = Component.displayName || Component.name || "Component";

  class WithLogging extends React.Component<P> {
    componentDidMount() {
      if (logRender) {
        console.log(`Rendering component: ${componentName}`);
      }
      if (logProps) {
        console.log(`Component props: ${JSON.stringify(this.props)}`);
      }
    }

    render() {
      return <Component {...this.props} />;
    }
  }

  WithLogging.displayName = `WithLogging(${componentName})`;

  return WithLogging;
}

interface WithLoggingOptions {
  logRender: boolean;
  logProps: boolean;
}

function WithLogging(options: WithLoggingOptions) {
  return function<T extends new (...args: any[]) => {}>(constructor: T) {
    return class extends constructor {
      constructor(...args: any[]) {
        super(...args);
        withLogging(this, options);
      }
    };
  };
}

interface MyComponentProps {
  name: string;
}

@WithLogging({ logRender: true, logProps: true })
class MyComponent extends React.Component<MyComponentProps> {
  render() {
    return (
      <div>
        Hello, {this.props.name}!
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <MyComponent name="Alice" />
      <MyComponent name="Bob" />
    </div>
  );
}

export default App;

Обратите внимание, что декораторы все еще являются экспериментальной функцией TypeScript. Чтобы включить эту функцию, необходимо установить параметр компилятора experimentalDecorators либо в командной строке, либо в файле tsconfig.json.

Каковы лучшие практики шаблона Builder в React

Вот некоторые из лучших практик использования шаблона Builder в React:

• Компоненты компоновщика должны быть простыми и модульными. Используйте меньшие компоненты для создания больших и избегайте создания сложной логики внутри ваших компонентов компоновщика.
• Используйте реквизиты для настройки компонентов вашего конструктора и передачи данных по дереву компонентов. Избегайте использования состояния или контекста без необходимости.
• Используйте составные компоненты или компоненты более высокого порядка, чтобы дополнить компоненты компоновщика дополнительными функциями или логикой. Например, вы можете использовать withValidation HOC для добавления логики проверки к вашим компонентам ввода или withLogging для добавления журналов.

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

Узнать больше