В чем разница между классовыми и функциональными компонентами?react-3

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

1. Синтаксис

Классовые компоненты:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Функциональные компоненты:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
// Или с arrow function:
const Welcome = (props) => <h1>Hello, {props.name}</h1>;

2. Работа с состоянием

Классовые:

• Используют this.state и this.setState()

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

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

Функциональные:

• Используют хуки (hooks), в частности useState

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

  const increment = () => {
    setCount(count + 1);
  }
}

3. Методы жизненного цикла

Классовые:

• componentDidMount(), componentDidUpdate(), componentWillUnmount() и др.

class Example extends React.Component {
  componentDidMount() {
    console.log('Компонент смонтирован');
  }
}

Функциональные:

• Используют хук useEffect для всех сценариев жизненного цикла

function Example() {
  useEffect(() => {
    console.log('Компонент смонтирован');
    return () => console.log('Компонент будет размонтирован');
  }, []);
}

4. Контекст и this

Классовые:

• Требуют привязки контекста (this) или использования стрелочных функций

class MyComponent extends React.Component {
  handleClick() {
    // Проблемы с this без bind или стрелочной функции
  }
}

Функциональные:

• Не имеют проблем с this, так как не используют его

function MyComponent() {
  const handleClick = () => {
    // Нет проблем с контекстом
  };
}

5. Производительность

• Функциональные компоненты обычно легче и быстрее, так как:
  • Не создают экземпляров класса
  • React может лучше оптимизировать их с помощью hooks
• Однако разница в большинстве случаев незначительна

6. Современные тенденции

• После выхода React 16.8 (2019) с хуками функциональные компоненты стали стандартом
• Новые проекты почти всегда используют функциональные компоненты
• Классовые компоненты поддерживаются, но считаются legacy

Резюмируем

Характеристика	Классовые компоненты	Функциональные компоненты
Синтаксис	Классы ES6	Функции
Состояние	this.state	useState hook
Жизненный цикл	Методы жизненного цикла	useEffect hook
Контекст (this)	Требует управления	Не требуется
Рекомендации	Legacy (устаревший подход)	Современный стандарт

Вывод: В новых проектах следует использовать функциональные компоненты с хуками, так как они проще, современнее и покрывают все возможности классовых компонентов. Классовые компоненты важно знать для поддержки legacy-кода.