Чи працювали з класовими компонентами? У чому їхня особливість?

Повне пояснення

Що це і навіщо

Класові компоненти – це спосіб створювати React‑компоненти за допомогою синтаксису класів ES6. Вони дозволяють використовувати внутрішній стан через this.state і методи життєвого циклу, що корисно при складних сценаріях або при інтеграції з бібліотеками, що вимагають класової структури.

Ключові принципи

• Наслідування від React.Component
• this.state – внутрішній стан, змінюється через this.setState
• Методи життєвого циклу (componentDidMount, componentDidUpdate, componentWillUnmount тощо)
• this.props – доступ до пропсів

Як це працює

При створенні екземпляру класу React викликає конструктор, ініціалізує this.state, а потім рендерить компонент через метод render. Після монтуючого етапу викликаються відповідні lifecycle‑методи.

Практика і реалізація

class Counter extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    console.log('Mounted');
  }

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

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

Тестування

Для класових компонентів можна використовувати Jest + React Testing Library:

import { render, fireEvent } from '@testing-library/react';
const { getByText } = render(<Counter />);
fireEvent.click(getByText('0'));
expect(getByText('1')).toBeInTheDocument();

Особливості в контексті React

• Підтримка PureComponent для оптимізації рендеру.
• Можливість використання contextType для доступу до контексту.
• Підтримка ref через React.createRef().

Оптимізація, типові помилки та edge cases

• Не змінюйте state напряму; використовуйте setState.
• Уникайте зайвих re-renders, використовуючи shouldComponentUpdate або PureComponent.
• Переконайтеся, що обробники подій прив’язані до this (або використовуйте arrow‑функції).

Альтернативи

Функціональні компоненти з хуками (useState, useEffect) замінили більшість класових компонентів у сучасному React, забезпечуючи простіший синтаксис і кращу підтримку тестування.