Как организовать переиспользование компонентов в React? Советы разработчиков MediaSoft

8 августа 2024

Академия разработки MediaSoft

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

  • Создавайте компоненты высшего порядка (HOC)

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

Пример HOC

  • Выстраивайте композицию компонентов

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

Пример композиции компонентов

  • Используйте Render Props

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

  • Создавайте собственные хуки

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

 

Принципы создания пользовательских хуков:

  1. Начинайте имя с use.
  2. Используйте встроенные хуки React (useState, useEffect, useContext и т.д.).
  3. Возвращайте значения и функции.

 

  • Разделяйте на контейнеры и компоненты представления

Используйте разделение компонентов на контейнеры, которые управляют состоянием и бизнес-логикой,
и компоненты представления, которые отображают данные, переданные им из контейнеров.
 

Пример разделения компонентов на контейнеры с бизнес-логикой и компоненты представления

  • Разделяйте на компоненты страниц и компоненты макета

Разделение компонентов на те, которые отвечают за макет (навигация, боковая панель, футер и т.д.) и те, которые отвечают
за конкретное содержание страницы (главная страница, страница «Контакты», «О нас» и т.д.), может существенно повысить переиспользование.

  • Используйте библиотеки компонентов

Существует множество библиотек компонентов, таких как Material-UI, Ant Design, Chakra UI и другие, предоставляющие готовые компоненты для переиспользования в ваших проектах. Можно использовать библиотеку как готовую базу для реализации своего UI.

 

ИТОГО

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


Больше источников

Официальная документация React

Настройка компонентов React с помощью свойств

Простое переиспользование кода с помощью React Hooks

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