Що таке композиція компонентів?

ReactJunior~2 хв читання

Коротке визначення

Композиція компонентів - це спосіб збирати складні інтерфейси з простих компонентів, об'єднуючи їх як "цеглинки".

Іншими словами:

Композиція - це вкладення і комбінація компонентів, де один компонент включає або використовує інші, щоб формувати складнішу поведінку або структуру.

Проста аналогія

React-компоненти - це деталі конструктора LEGO. Ти можеш взяти прості блоки (Button, Card, Input) і скласти з них що завгодно - від форми до цілої сторінки.

Приклад №1. Базова композиція

javascript

function Header() {
  return <header>Заголовок</header>;
}

function Footer() {
  return <footer>Підвал</footer>;
}

function App() {
  return (
    <div>
      <Header />
      <main>Контент</main>
      <Footer />
    </div>
  );
}

Тут:

App складається з компонентів Header, Footer і main;
Це і є композиція - "компоненти всередині компонентів".

Приклад №2. Композиція через `props.children`

Ти можеш передати JSX всередину компонента:

javascript

function Card({ children }) {
  return <div className="card">{children}</div>;
}

function App() {
  return (
    <Card>
      <h2>Заголовок</h2>
      <p>Опис картки</p>
    </Card>
  );
}

Тут Card - "обгортка", а все, що між тегами <Card>...</Card>, потрапляє в props.children.

Це дозволяє створювати гнучкі компоненти-контейнери.

Приклад №3. Композиція через іменовані props

Можна передавати різні частини інтерфейсу явно:

javascript

function Layout({ header, content, footer }) {
  return (
    <div>
      <header>{header}</header>
      <main>{content}</main>
      <footer>{footer}</footer>
    </div>
  );
}

function App() {
  return (
    <Layout
      header={<h1>Мій сайт</h1>}
      content={<p>Ласкаво просимо!</p>}
      footer={<small>© 2025</small>}
    />
  );
}

Це варіант композиції, де компонент приймає "слоти" для різних частин контенту.

Приклад №4. Композиція для повторного використання логіки (патерн "Container + Presentation")

Презентаційний компонент:

javascript

function UserCard({ user }) {
  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

Контейнер:

javascript

function UserContainer() {
  const [user, setUser] = useState({ name: "Alex", email: "alex@example.com" });
  return <UserCard user={user} />;
}

Контейнер керує логікою, а UserCard - просто відображає дані. Композиція допомагає розділити відповідальність.

Приклад №5. Композиція через "render props"

javascript

function DataProvider({ children }) {
  const data = { message: "Привіт!" };
  return children(data);
}

function App() {
  return (
    <DataProvider>
      {(data) => <h1>{data.message}</h1>}
    </DataProvider>
  );
}

Тут children - функція, яка отримує дані. Це спосіб передавати поведінку через композицію.

Приклад №6. Композиція через "HOC" (компоненти вищого порядку)

javascript

function withLogger(Component) {
  return function Wrapped(props) {
    console.log("Рендер:", Component.name);
    return <Component {...props} />;
  };
}

const ButtonWithLog = withLogger(Button);

Це теж форма композиції: функція приймає компонент і повертає новий, з додатковою логікою.

Робить код придатним для повторного використання Допомагає розділяти відповідальність (UI та логіка) Дозволяє вкладати і компонувати інтерфейс як модульну систему Спрощує тестування і підтримку

Композиція vs Успадкування

React дотримується принципу:

"Композиція краща за успадкування".

Замість того щоб створювати "суперкласи" компонентів, у React ми просто вкладаємо один компонент в інший, або передаємо потрібні частини інтерфейсу через props.

Підсумок

Поняття	Опис	Приклад
Композиція	Вкладення одного компонента в інший	`<Card><Content /></Card>`
Через children	Гнучке наповнення компонента	`{children}`
Через props	Явна передача JSX	`<Layout header={<Header />} />`
Через render props / HOC	Повторне використання логіки	`withAuth(Component)`
Перевага	Гнучкість, модульність, чиста архітектура	-

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.