В чем разница между классовыми и функциональными компонентами?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-кода.

Вопросы

Собеседования