Типы компонентов в React — функциональные и классовые компоненты

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

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

Пример компонента:

// Компонент "Приветствие"
function Greeting() {
  return <h1>Привет, React!</h1>;
}

Этот компонент возвращает заголовок <h1>. Легко, правда? Но есть разные способы создавать компоненты, и именно о них мы поговорим ниже.

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

Функциональные компоненты — это, как правило, самый простой способ создания компонентов в React. Их основная задача — принимать пропсы (входные параметры) и возвращать разметку. Если вы знаете, как написать JavaScript-функцию, то знаете, как создать функциональный компонент.

Пример:

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Привет, {name}!</h1>;
};

Особенности:

1. Синтаксис: функциональный компонент — это просто функция, которая принимает props и возвращает JSX.

2. Простота: лаконичный синтаксис. Не нужно работать с классами, состояниями или this (ура, никаких головных болей!).

3. Поддержка хуков: это важное преимущество. С помощью таких хуков, как useState и useEffect, функциональные компоненты могут использовать состояния и эффекты, которые раньше были доступны только в классовых компонентах.

Пример с состоянием:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Текущий счёт: {count}</p>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
};

Обратите внимание, что здесь мы использовали хук useState для управления состоянием компонента. Это делает функциональные компоненты гораздо более мощными, чем они были до появления React-хуков.

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

Если функциональные компоненты — это "молодёжная тусовка" React, то классовые компоненты — это "старожилы". Они были в центре внимания до появления хуков в React 16.8. Основное отличие классовых компонентов заключается в том, что они используют JavaScript-классы class, обладают состоянием state и методами жизненного цикла.

Пример:

import React, { Component } from 'react';

type CounterState = {
  count: number;
};

class Counter extends Component<{}, CounterState> {
  state = {
    count: 0,
  };

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

  render() {
    return (
      <div>
        <p>Текущий счёт: {this.state.count}</p>
        <button onClick={this.increment}>Увеличить</button>
      </div>
    );
  }
}

Особенности:

1. Использование классов: классовый компонент должен наследовать React.Component.

2. Методы жизненного цикла: классы предоставляют специальные методы, чтобы работать с жизненным циклом компонента. Например, componentDidMount() вызывается после первого рендера.

3. Состояние (state): у классовых компонентов есть объект состояния, который изменяется через метод setState.

4. this: это слово может стать вашим лучшим другом или злейшим врагом, если вы забудете правильно привязать метод.

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

Если бы React был супермаркетом, то хуки были бы самокассами, которые упростили жизнь всем. С появлением хуков функциональные компоненты стали своего рода "новым стандартом", а классовые компоненты постепенно отодвигаются на второй план.

Когда использовать функциональные и классовые компоненты

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

• Используйте их почти всегда. Серьёзно, они проще, чище и поддерживают хуки.
• Идеальны для компонентов любого уровня сложности.

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

• Только если вы работаете в старом проекте, где ещё нет хуков.
• Или если вы наткнулись на редкий случай несовместимости (практически нереально в современном React).

Пример: Сравнение в реальном задачном коде

Давайте создадим один компонент двумя способами — с использованием функционального и классового компонентов.

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

import React, { useState, useEffect } from 'react';

const Timer: React.FC = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval: number = window.setInterval(() => {
      setSeconds((s) => s + 1);
    }, 1000);

    return () => {
      if (interval) clearInterval(interval); // Безопасная очистка таймера
    };
  }, []);

  return <h1>Прошло секунд: {seconds}</h1>;
};

export default Timer;

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

import React, { Component } from 'react';

type TimerState = {
  seconds: number;
};

class Timer extends Component<{}, TimerState> {
  state: TimerState = {
    seconds: 0,
  };

  private interval: number | null = null;

  componentDidMount() {
    this.interval = window.setInterval(() => {
      this.setState((prevState) => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    if (this.interval !== null) {
      clearInterval(this.interval);
    }
  }

  render() {
    return <h1>Прошло секунд: {this.state.seconds}</h1>;
  }
}

export default Timer;

Обратите внимание, насколько лаконичнее выглядит функциональный компонент. Вы избавляетесь от громоздкого кода, связанного с методами componentDidMount и componentWillUnmount.

Типичные ошибки

Если вы новичок, пары setState и хуков могут сбить вас с толку. Например, забыть правильно привязать метод в классовом компоненте this.increment = this.increment.bind(this) — довольно частая ошибка. А в функциональных компонентах распространённый баг — это игнорирование зависимостей в хуке useEffect.

Теперь вы знаете, как работать с компонентами в React, когда выбрать функциональные компоненты и когда — классовые. Реальный мир React нынче приветствует функциональные компоненты, так что это ваш новый лучший друг!

1

Задача

Модуль 3: React, 1 уровень, 4 лекция

Недоступна

Функциональный компонент с передачей пропсов

Функциональный компонент с передачей пропсов

Открыть

1

Задача

Модуль 3: React, 1 уровень, 4 лекция

Недоступна

Классовый компонент с состоянием

Классовый компонент с состоянием

Открыть

3

Опрос

Введение в React, 1 уровень, 4 лекция

Недоступен

Введение в React

Введение в React

Открыть