Класовий vs функціональний компонент

ReactJunior~2 хв читання

1. Синтаксис

Класовий компонент - це ES6-клас, який успадковується від React.Component і обов'язково повинен мати метод render().

javascript

class Welcome extends React.Component {
  render() {
    return <h1>Привіт, {this.props.name}!</h1>;
  }
}

Функціональний компонент - це проста JS-функція, яка приймає props і повертає JSX.

javascript

function Welcome({ name }) {
  return <h1>Привіт, {name}!</h1>;
}

Тобто функціональний компонент - це "чиста функція", а класовий - повноцінний об'єкт зі станом і методами.

2. Робота зі станом (state)

У класовому компоненті:

javascript

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

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

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

У функціональному компоненті (хуки):

javascript

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Висновок: хуки (useState, useEffect та ін.) дають функціональним компонентам можливість мати стан - раніше це було доступно тільки класам.

3. Життєвий цикл компонента

Класові компоненти мають спеціальні методи життєвого циклу:

javascript

class Example extends React.Component {
  componentDidMount() {
    console.log("Монтування");
  }

  componentDidUpdate() {
    console.log("Оновлення");
  }

  componentWillUnmount() {
    console.log("Розмонтування");
  }
}

Функціональні компоненти роблять те саме через хуки (useEffect):

javascript

function Example() {
  useEffect(() => {
    console.log("Монтування або оновлення");

    return () => console.log("Розмонтування");
  }, []);
}

Різниця:

класи використовують методи;
функції використовують хуки і замикання.

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

У класах потрібно явно працювати з this:

javascript

this.state
this.props
this.setState()
this.handleClick = this.handleClick.bind(this)

У функціональних компонентах this немає взагалі:

javascript

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

Код стає простішим, без bind, без плутанини з контекстом.

5. Використання хуків

Хуки доступні тільки у функціональних компонентах:

javascript

useState, useEffect, useMemo, useCallback, useRef, useContext

У класах хуки недоступні - замість них старі механізми:

state + setState
методи життєвого циклу
контекст через Context.Consumer

6. Продуктивність і читабельність

Порівняння	Функціональний	Класовий
Код	Короткий, лаконічний	Більш багатослівний
Контекст	Немає `this`	Потрібно прив'язувати методи
Стан	Через хуки (`useState`)	Через `this.state`
Логіка	Розділяється хуками	Розкидана по методах
Оптимізація	`React.memo`, `useMemo`	`PureComponent`, `shouldComponentUpdate`
Тестування	Легше	Важче через `this`

7. Підтримка та актуальність

Класові компоненти з'явилися першими (React 0.13-15).
З версії React 16.8 (2019) з'явилися хуки - і вони замінили класи.
Сьогодні все нове пишуть на функціональних компонентах.
Класи підтримуються, але вважаються "legacy".

8. Приклад "один і той самий компонент" у двох стилях

Класовий варіант:

javascript

class Hello extends React.Component {
  state = { name: "Alex" };

  render() {
    return <h1>Привіт, {this.state.name}</h1>;
  }
}

Функціональний варіант:

javascript

function Hello() {
  const [name, setName] = useState("Alex");
  return <h1>Привіт, {name}</h1>;
}

Один і той самий результат, але функціональний варіант простіший, компактніший і зрозуміліший.

9. Підсумок

Критерій	Класовий компонент	Функціональний компонент
Синтаксис	Клас + `render()`	Проста функція
Стан	Через `this.state`	Через `useState`
Оновлення	`this.setState()`	`setState` з хука
Життєвий цикл	Методи (`componentDidMount`)	Хуки (`useEffect`)
Контекст `this`	Є	Немає
Продуктивність	Повільніше на великих деревах	Швидше і легше
Підтримка	Старий стандарт	Сучасний стандарт
Перевикористання логіки	Через HOC/Render Props	Через хуки

Підсумкове визначення:

Класовий компонент - "старий" спосіб опису компонентів через класи і методи життєвого циклу. Функціональний компонент - "новий" спосіб через звичайні функції і хуки, простіший, легший і декларативніший.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.