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

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

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

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

Контент

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

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

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

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

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

## 1. Функціональні компоненти (Function Components) - сучасний стандарт

Це **звичайні JavaScript-функції**, які **приймають** `props`
і **повертають JSX** (опис інтерфейсу).

```javascript
function Greeting({ name }) {
  return <h1>Привіт, {name}!</h1>;
}
```

Використання:

```javascript
<Greeting name="Тім" />
```

Особливості:

- прості, читабельні, перевикористовувані;
- можуть використовувати **хуки** (`useState`, `useEffect`, `useContext` і т. д.);
- не мають власного життєвого циклу, як класи - замість цього логіка реалізується через хуки.

---

## 2. Класові компоненти (Class Components) - старий формат (до React 16.8)

Це **ES6-класи**, які успадковуються від `React.Component`.

```javascript
class Greeting extends React.Component {
  render() {
    return <h1>Привіт, {this.props.name}!</h1>;
  }
}
```

Особливості:

- мають методи життєвого циклу (`componentDidMount`, `componentDidUpdate`, `componentWillUnmount` і т.д.);
- використовують `this.state` і `this.setState()` для роботи зі станом;
- сьогодні застосовуються дедалі рідше - їх **замінили функціональні компоненти з хуками**.

---

## 3. Компоненти вищого порядку (Higher-Order Components, HOC)

Це **функції, які приймають компонент і повертають новий компонент**
(тобто "обгортають" його додатковою логікою).

```javascript
function withLogger(Component) {
  return function Wrapped(props) {
    console.log('Рендериться:', Component.name);
    return <Component {...props} />;
  };
}
```

Використання:

```javascript
const EnhancedGreeting = withLogger(Greeting);
```

Застосовуються для:

- повторного використання логіки (наприклад, авторизація, логування, кешування);
- роботи зі сторонніми бібліотеками (Redux `connect` - це HOC).

> Сьогодні HOC поступово замінюються **хуками** і **композиціями** компонентів.

---

## 4. Контейнерні та презентаційні компоненти (патерн розділення)

Це **архітектурний підхід**, а не різні типи "за кодом".

- **Презентаційний (UI)** компонент
- відповідає тільки за відображення (розмітку і стилі):

```javascript
  const UserCard = ({ name, age }) => (
    <div className="card">
      <h2>{name}</h2>
      <p>{age} років</p>
    </div>
  );
  ```
- **Контейнерний** компонент
- керує станом, логікою, запитами і передає дані вниз:

```javascript
  function UserContainer() {
    const [user, setUser] = useState({ name: "Тім", age: 25 });
    return <UserCard name={user.name} age={user.age} />;
  }
  ```

Це розділення допомагає:

- писати більш "чисті" і перевикористовувані UI-компоненти;
- тестувати логіку окремо від представлення.

---

## 5. Контрольовані і неконтрольовані компоненти (форми)

Стосуються елементів форм (`input`, `select`, `textarea`).

- **Контрольований компонент** - React повністю керує його значенням через `state`:

```javascript
  const [value, setValue] = useState("");
  return <input value={value} onChange={e => setValue(e.target.value)} />;
  ```
- **Неконтрольований компонент** - значення зберігається в DOM,
і React отримує його через `ref`:

```javascript
  const inputRef = useRef();
  const handleSubmit = () => console.log(inputRef.current.value);
  return <input ref={inputRef} />;
  ```

---

## 6. Pure Components (чисті компоненти)

Це компоненти, які **перемальовуються тільки при реальній зміні** `props` **або** `state`.

У функціональній формі:

```javascript
const Greeting = React.memo(({ name }) => <h1>Привіт, {name}</h1>);
```

У класовій формі:

```javascript
class Greeting extends React.PureComponent {
  render() {
    return <h1>Привіт, {this.props.name}</h1>;
  }
}
```

Допомагають **уникати зайвих ререндерів** і **підвищують продуктивність**.

---

## 7. Error Boundary (компоненти-перехоплювачі помилок)

Це **спеціальні класові компоненти**,
які ловлять помилки в дочірніх компонентах,
щоб не "падав" весь застосунок.

```javascript
class ErrorBoundary extends React.Component {
  state = { hasError: false };

componentDidCatch(error, info) {
    this.setState({ hasError: true });
  }

render() {
    if (this.state.hasError) return <h2>Щось пішло не так</h2>;
    return this.props.children;
  }
}
```

---

## Підсумок

| Тип компонента | Що робить | Приклад |
|---|---|---|
| **Функціональний** | Повертає JSX через функцію | `function Hello()` |
| **Класовий** | Використовує `this.state`, життєві цикли | `class Hello extends React.Component` |
| **HOC** | Приймає компонент і повертає новий | `withLogger(Component)` |
| **Контейнерний / Презентаційний** | Розділення логіки і UI | `UserContainer / UserCard` |
| **Контрольований / Неконтрольований** | Керування вводом даних | `<input value={...} />` |
| **Pure / React.memo** | Оптимізований, не перемальовується даремно | `React.memo()` |
| **Error Boundary** | Ловить помилки дочірніх компонентів | `componentDidCatch` |

---

**Коротко:**

> У React всі компоненти поділяються по суті на **функціональні** і **класові**,
> а решта типів - це **патерни або розширення** цих базових форм
> (наприклад, HOC, контейнерні, чисті і т.д.).

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

Для рев’юера

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

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