В чем разница между классовыми компонентами и компонентами на React Hooks

Классовые компоненты используют ES6-классы и методы жизненного цикла (componentDidMount, componentDidUpdate и т.д.), а функциональные с хуками (useState, useEffect) работают через функции и хуки.

Основные отличия:

1. Синтаксис – классы vs функции.
2. Состояние – в классах через this.state, в хуках через useState.
3. Жизненный цикл – хуки заменяют методы (useEffect вместо componentDidMount и др.).
4. Переиспользование логики – хуки позволяют выносить логику в кастомные хуки, в классах – HOC или рендер-пропсы.

Пример:

// Классовый компонент
class Counter extends React.Component {
  state = { count: 0 };
  increment = () => this.setState({ count: this.state.count + 1 });
  render() { return <button onClick={this.increment}>{this.state.count}</button>; }
}

// Функциональный с хуками
function Counter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  return <button onClick={increment}>{count}</button>;
}

Хуки проще, компактнее и позволяют избежать "адского колбэка" (this).