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

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

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

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

Контент

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

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

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

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

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

## 1. Синтаксис

**Класовий компонент** - це ES6-клас, який **успадковується від** `React.Component`
і обов'язково повинен мати метод `render()`.

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

**Функціональний компонент** - це **проста JS-функція**, яка приймає `props`
і повертає JSX.

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

Тобто функціональний компонент - це "чиста функція",
а класовий - повноцінний об'єкт зі станом і методами.

---

## 2. Робота зі станом (state)

**У класовому компоненті:**

```javascript
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}
```

**У функціональному компоненті (хуки):**

```javascript
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```

**Висновок:**
хуки (`useState`, `useEffect` та ін.) дають функціональним компонентам
можливість мати стан - раніше це було доступно тільки класам.

---

## 3. Життєвий цикл компонента

**Класові компоненти** мають спеціальні методи життєвого циклу:

```javascript
class Example extends React.Component {
  componentDidMount() {
    console.log("Монтування");
  }

componentDidUpdate() {
    console.log("Оновлення");
  }

componentWillUnmount() {
    console.log("Розмонтування");
  }
}
```

**Функціональні компоненти** роблять те саме через хуки (`useEffect`):

```javascript
function Example() {
  useEffect(() => {
    console.log("Монтування або оновлення");

return () => console.log("Розмонтування");
  }, []);
}
```

Різниця:

- класи використовують методи;
- функції використовують хуки і замикання.

---

## 4. Контекст `this`

У **класах** потрібно явно працювати з `this`:

```javascript
this.state
this.props
this.setState()
this.handleClick = this.handleClick.bind(this)
```

У **функціональних компонентах** `this` немає взагалі:

```javascript
const [count, setCount] = useState(0);
```

Код стає простішим, без `bind`, без плутанини з контекстом.

---

## 5. Використання хуків

Хуки доступні **тільки у функціональних компонентах**:

```javascript
useState, useEffect, useMemo, useCallback, useRef, useContext
```

У **класах хуки недоступні** - замість них старі механізми:

- `state` + `setState`
- методи життєвого циклу
- контекст через `Context.Consumer`

---

## 6. Продуктивність і читабельність

| Порівняння | Функціональний | Класовий |
|---|---|---|
| Код | Короткий, лаконічний | Більш багатослівний |
| Контекст | Немає `this` | Потрібно прив'язувати методи |
| Стан | Через хуки (`useState`) | Через `this.state` |
| Логіка | Розділяється хуками | Розкидана по методах |
| Оптимізація | `React.memo`, `useMemo` | `PureComponent`, `shouldComponentUpdate` |
| Тестування | Легше | Важче через `this` |

---

## 7. Підтримка та актуальність

- Класові компоненти з'явилися першими (React 0.13-15).
- З версії **React 16.8 (2019)** з'явилися **хуки** - і вони **замінили класи**.
- Сьогодні **все нове пишуть на функціональних компонентах**.
- Класи підтримуються, але вважаються "legacy".

---

## 8. Приклад "один і той самий компонент" у двох стилях

**Класовий варіант:**

```javascript
class Hello extends React.Component {
  state = { name: "Alex" };

render() {
    return <h1>Привіт, {this.state.name}</h1>;
  }
}
```

**Функціональний варіант:**

```javascript
function Hello() {
  const [name, setName] = useState("Alex");
  return <h1>Привіт, {name}</h1>;
}
```

Один і той самий результат, але функціональний варіант простіший, компактніший і зрозуміліший.

---

## 9. Підсумок

| Критерій | Класовий компонент | Функціональний компонент |
|---|---|---|
| Синтаксис | Клас + `render()` | Проста функція |
| Стан | Через `this.state` | Через `useState` |
| Оновлення | `this.setState()` | `setState` з хука |
| Життєвий цикл | Методи (`componentDidMount`) | Хуки (`useEffect`) |
| Контекст `this` | Є | Немає |
| Продуктивність | Повільніше на великих деревах | Швидше і легше |
| Підтримка | Старий стандарт | Сучасний стандарт |
| Перевикористання логіки | Через HOC/Render Props | Через хуки |

---

**Підсумкове визначення:**

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

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

Для рев’юера

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

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