Как создавать повторно используемые компоненты React

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

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

Соглашения об именах

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

Используйте реквизит для настройки

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

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

function Button({ label }) {
  return (
    <button>{label}</button>
  );
}

<Button label="Click me" /> // Usage

Держите компоненты маленькими и сфокусированными

Старайтесь, чтобы ваши компоненты были небольшими и были сосредоточены на одной задаче. Этот принцип, известный как принцип единой ответственности (SRP), гласит, что у компонента должна быть только одна причина для изменения. Компоненты, которые придерживаются этого принципа, легче тестировать, обслуживать и повторно использовать.

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

Используйте PropTypes

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

import PropTypes from 'prop-types';

function Button({ label }) {
  return (
    <button>{label}</button>
  );
}

Button.propTypes = {
  label: PropTypes.string.isRequired,
};

Гибкость

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

Например, у вас может быть компонент List, который принимает массив строк или массив объектов и соответствующим образом отображает элементы.

import PropTypes from 'prop-types';

function List({ items }) {
  return (
    <ul>
      {items.map((item, index) => 
        <li key={index}>
          {typeof item === 'object' ? item.name : item}
        </li>
      )}
    </ul>
  );
}

List.propTypes = {
  items: PropTypes.array.isRequired,
};

Используйте контекст разумно

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

Контекст следует использовать экономно и для данных, которые действительно являются «глобальными» для дерева компонентов React, таких как информация об аутентифицированном пользователе или информация о теме.

Создать сборник рассказов

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

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

Если вам нравится моя работа, нажмите на 👏, подпишитесь на меня, чтобы узнать больше, и купите мне кофе, если вы чувствуете себя очень щедрым.

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .