Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке композиція компонентів?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

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

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

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

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

---

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

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)` |
| **Перевага** | Гнучкість, модульність, чиста архітектура | - |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати531 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.