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

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

Различие между функциональными и классовыми компонентами — это фундаментальная тема в React, отражающая эволюцию библиотеки. Раньше классовые компоненты были единственным способом использовать состояние и методы жизненного цикла, но с появлением Hooks (хуков) в React 16.8 (2019 год) функциональные компоненты получили полную паритетность по возможностям, что привело к современной практике, где они стали стандартом де-факто.

Ключевые отличия

1. Синтаксис и структура

Функциональные компоненты — это простые JavaScript/TypeScript функции, которые возвращают JSX.

// Функциональный компонент
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Компонент смонтирован или count обновлён');
  }, [count]);

  return (
    <div>
      <p>Вы кликнули {count} раз</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

Классовые компоненты — это ES6-классы, расширяющие React.Component или React.PureComponent.

// Классовый компонент
import React from 'react';

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

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

  componentDidUpdate() {
    console.log('Компонент обновлён');
  }

  render() {
    return (
      <div>
        <p>Вы кликнули {this.state.count} раз</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Кликни меня
        </button>
      </div>
    );
  }
}

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

• Функциональные компоненты: Используют хук useState для объявления и обновления состояния. Состояние представляет собой отдельные переменные.
• Классовые компоненты: Используют this.state (объект) и this.setState() для обновления. Состояние всегда является объектом.

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

• Функциональные компоненты: Используют хук useEffect, который объединяет логику componentDidMount, componentDidUpdate и componentWillUnmount в одной декларативной API. Разделение логики происходит по назначению, а не по времени выполнения.
• Классовые компоненты: Имеют отдельные методы для каждой фазы (componentDidMount, componentDidUpdate, componentWillUnmount и др., включая устаревшие). Логика часто размазывается между разными методами.

4. Контекст (context) и рефы (refs)

• Функциональные компоненты: Используют хуки useContext и useRef.
• Классовые компоненты: Используют Context.Consumer (или статическое свойство contextType) для контекста и создают рефы через React.createRef() в конструкторе.

5. Производительность и оптимизации

• React.memo() — аналог PureComponent для функциональных компонентов (мемоизация результата).
• useMemo и useCallback — хуки для точечной мемоизации значений и функций внутри функциональных компонентов.
• Классовые компоненты могут расширять React.PureComponent для поверхностного сравнения пропсов и состояния.

Преимущества функциональных компонентов с Hooks

• Лучшая читаемость и композиция: Логика разделяется на небольшие, переиспользуемые хуки, а не разбрасывается по методам жизненного цикла.
• Избавление от this: Нет необходимости в привязке контекста (bind) в конструкторе, что уменьшает количество шаблонного кода и потенциальных ошибок.
• Проще тестировать: Функциональные компоненты — это чистые функции, зависящие от пропсов. Логику, вынесенную в кастомные хуки, можно тестировать изолированно.
• Будущее React: Команда React четко обозначила, что будущее библиотеки — за функциональными компонентами и хуками. Новые возможности (например, Concurrent Features) в первую очередь разрабатываются для них.

Когда (очень редко) можно рассмотреть классовые компоненты

• Поддержка легационного (унаследованного) кода, который ещё не мигрировал на хуки.
• Ошибки граничных случаев в сторонних библиотеках, которые ещё не полностью адаптированы под хуки (на практике это почти не встречается).

Вывод

В современной разработке на React функциональные компоненты с хуками являются рекомендованным и предпочтительным подходом. Они предлагают более простую, понятную и мощную модель для управления состоянием, побочными эффектами и логикой жизненного цикла. Классовые компоненты — это важная часть истории и экосистемы React, но для новых проектов и рефакторинга старых следует использовать функциональный подход. Понимание классовых компонентов необходимо для работы с существующим кодом и глубокого понимания эволюции React.