Что такое композиция в React?

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

Как работает композиция

Основные механизмы композиции в React:

• Передача данных через props: Вы передаёте данные (строки, числа, массивы, объекты) от родительского компонента к дочернему, настраивая его поведение.
• Передача React-элементов и компонентов через props: Вы можете передавать целые компоненты или JSX-элементы как props. Особенно важен специальный prop children, который позволяет вкладывать содержимое между открывающим и закрывающим тегами компонента.
• Использование паттернов: Такие паттерны, как контейнеры и презентационные компоненты, или рендер-пропсы, также основаны на композиции.

Примеры композиции

Простейший пример — использование children:

function Card({ children }) {
  return (
    
      {children}
    
  );
}

function App() {
  return (
    
      Заголовок
      Какой-то текст внутри карточки.
    
  );
}

Компонент Card ничего не знает о своём содержимом — он просто рендерит переданные children. Это делает его максимально переиспользуемым.

Более сложный пример — композиция через явную передачу компонентов в props:

function PageLayout({ header, sidebar, content }) {
  return (
    
      {header}
      {sidebar}
      {content}
    
  );
}

function App() {
  return (
    }
      sidebar={}
      content={}
    />
  );
}

Где и зачем применять

Композиция применяется повсеместно в React-приложениях для создания гибкой и поддерживаемой архитектуры. Она полезна, когда вам нужно:

• Создать переиспользуемые компоненты-обёртки (например, модальные окна, карточки, панели).
• Разделить ответственность между компонентами (например, контейнер получает данные, а презентационный компонент их отображает).
• Реализовать сложные UI-паттерны, такие как Higher-Order Components (HOC) или пользовательские хуки, которые композируют логику.

Вывод: Композиция — это ключевой подход в React для построения интерфейсов. Она делает код модульным, лёгким для тестирования и повторного использования. Всегда предпочитайте композицию наследованию при разработке на React.