В React есть два основных типа компонентов: классовые и функциональные.

Классовые компоненты — это компоненты, определённые как классы, которые наследуют от React.Component. Они могут иметь состояние (state) и методы жизненного цикла.

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

  componentDidMount() {
    // код после монтирования
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Функциональные компоненты — это функции, которые принимают props и возвращают JSX. Раньше они были «статическими» и не имели состояния и методов жизненного цикла, но с появлением хуков (hooks) функциональные компоненты могут использовать состояние и другие возможности React.

function MyComponent(props) {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    // код после монтирования
  }, []);

  return <div>{count}</div>;
}

Отличия:

Классовые компоненты используют this, функциональные — нет.
Функциональные компоненты с хуками более компактны и проще для понимания.
Современный React рекомендует использовать функциональные компоненты с хуками, так как они более гибкие и позволяют лучше оптимизировать код.

Что такое классовые и функциональные компоненты в React? Чем они отличаются?