Методи життєвого циклу компонентів у React

Що таке життєвий цикл компонент?

Життєвий цикл компонент в React — це послідовність етапів, які компонент проходить від свого створення до видалення з DOM.

Життєвий цикл існує лише для класових компонентів, але його поведінку можна відтворити за допомогою хуків у функціональних компонентх.

Етапи життєвого циклу

Життєвий цикл ділиться на 3 ключові фази:

Фаза	Опис
Монтування	Момент, коли компонент з'являється в DOM
Оновлення	Оновлення компонент, коли відбуваються зміни
Видалення	Видалення компонент з DOM

Методи фази монтування

Метод	Коли викликається
`constructor`	У момент створення компонент
`static getDerivedStateFromProps`	Перед рендерингом (рідко використовується)
`render`	Обов'язковий метод, повертає JSX
`componentDidMount`	Після монтування в DOM

Методи фази оновлення

Метод	Коли викликається
`static getDerivedStateFromProps`	Коли оновлюються пропси
`shouldComponentUpdate`	Перед повторним рендерингом (може скасувати його)
`render`	При кожному оновленні
`getSnapshotBeforeUpdate`	Сnapshot DOM перед оновленням
`componentDidUpdate`	Після оновлення компонент

Метод фази видалення

Метод	Коли викликається
`componentWillUnmount`	Перед видаленням компонент з DOM

Еквіваленти функціонального компонент

Функції хуків дозволяють відтворити поведінку життєвого циклу:

Метод класу	Хук у функції
`componentDidMount`	`useEffect(() => {}, [])`
`componentDidUpdate`	`useEffect(() => {...}, [dep])`
`componentWillUnmount`	`useEffect(() => { return () => {...} }, [])`
`shouldComponentUpdate`	`React.memo()` + `useCallback`, `useMemo`

Приклад використання хуків

tsx

import { useEffect } from "react";

function MyComponent() {
  useEffect(() => {
    console.log("Монтування компонент");

    return () => {
      console.log("Видалення компонент");
    };
  }, []);

  return <div>Привіт!</div>;
}

Порада:

У нових проектах краще використовувати функціональні компоненти з хуками — вони простіші, лаконічніші і рекомендовані спільнотою React.

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

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

Premium

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

Дочитали статтю?

Практика завдань

Методи життєвого циклу компонентів у React

#Що таке життєвий цикл компонент?

#Етапи життєвого циклу

#Методи фази монтування

#Методи фази оновлення

#Метод фази видалення

#Еквіваленти функціонального компонент

#Приклад використання хуків