Hack Frontend Community

Разница между функциональными и классовыми компонентами в React

Что такое компоненты в React?

Компоненты — это строительные блоки React-приложения. Они могут быть:

  • Функциональными — обычные JavaScript-функции
  • Классовыми — классы, наследующие React.Component

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

Функциональные компонентыКлассовые компоненты
Синтаксисfunction MyComponent() class MyComponent extends React.Component
Поддержка состоянияДа (через useState, useReducer)Да (через this.state)
Жизненный циклЧерез хуки (useEffect)Методы (componentDidMount, и т.п.)
Контекст (Context)useContext()this.context
thisНет thisИспользуется this
Краткость кодакороче и прощеболее многословные
Поддержка хуков (hooks)ДаНет
Performance (теоретически)Чуть вышеЧуть ниже

Пример функционального компонента

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("Компонент отрендерен");

    return () => {
      console.log("Компонент размонтирован");
    };
  }, []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Пример классового компонента

import React from "react";

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

  componentDidMount() {
    console.log("Компонент отрендерен");
  }

  componentWillUnmount() {
    console.log("Компонент размонтирован");
  }

  render() {
    return (
      <div>
        <p>Счетчик: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +
        </button>
      </div>
    );
  }
}

Когда использовать

  • Функциональные компоненты — современный стандарт. Используются в 99% случаев, особенно с хуками.
  • Классовые компоненты — в устаревших проектах или при работе с легаси-кодом.

Вывод

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