Повторное использование кода и инкапсуляция логики в React

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

Пользовательские хуки и контекстный API

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

Вот пример пользовательского хука в React, который разделяет состояние и логику между компонентами:

import React, { useState, useEffect, useCallback } from 'react';
function useModal(initialState = false) {
  const [isOpen, setIsOpen] = useState(initialState);
  const openModal = useCallback(() => setIsOpen(true), []);
  const closeModal = useCallback(() => setIsOpen(false), []);
  return { isOpen, openModal, closeModal };
}
function Modal({ children }) {
  const { isOpen, closeModal } = useModal();
  if (!isOpen) {
    return null;
  }
  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button onClick={closeModal}>Close</button>
        {children}
      </div>
    </div>
  );
}
function ModalButton() {
  const { isOpen, openModal } = useModal();
  return (
    <>
      <button onClick={openModal}>Open Modal</button>
      {isOpen && <Modal>This is a modal</Modal>}
    </>
  );
}

Пользовательский хук useModal инкапсулирует состояние открытия модального окна, а также функции для открытия и закрытия модального окна. Компонент Modal получает состояние isOpen и функцию closeModal в качестве реквизита и использует их для отображения модального окна, когда isOpen равно true, и скрытия модального окна, когда isOpen равно false. Компонент ModalButton использует хук useModal и вызывает открытие модального окна при нажатии кнопки.

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