Методы жизненного цикла компонента в React
Что такое жизненный цикл компонента?
Жизненный цикл компонента в React — это последовательность этапов, через которые проходит компонент от его создания до удаления из DOM.
Жизненный цикл существует только у классовых компонентов, но его поведение можно повторить с помощью хуков в функциональных компонентах.
Этапы жизненного цикла
Жизненный цикл делится на 3 ключевых фазы:
| Фаза | Описание |
|---|---|
| Mounting | Момент появления компонента в DOM |
| Updating | Обновление компонента при изменениях |
| Unmounting | Удаление компонента из DOM |
Методы Mounting-фазы
| Метод | Когда вызывается |
|---|---|
constructor | В момент создания компонента |
static getDerivedStateFromProps | До рендера (редко используется) |
render | Обязательный метод, возвращает JSX |
componentDidMount | После монтирования в DOM |
Методы Updating-фазы
| Метод | Когда вызывается |
|---|---|
static getDerivedStateFromProps | При обновлении пропсов |
shouldComponentUpdate | Перед ререндером (можно отменить его) |
render | При каждом обновлении |
getSnapshotBeforeUpdate | Снимок DOM до обновления |
componentDidUpdate | После обновления компонента |
Метод Unmounting-фазы
| Метод | Когда вызывается |
|---|---|
componentWillUnmount | Перед удалением компонента из DOM |
Аналоги в функциональных компонентах
Функции-хуки позволяют повторить поведение жизненного цикла:
| Классовый метод | Хук в функции |
|---|---|
componentDidMount | useEffect(() => {}, []) |
componentDidUpdate | useEffect(() => {...}, [dep]) |
componentWillUnmount | useEffect(() => { return () => {...} }, []) |
shouldComponentUpdate | React.memo() + useCallback, useMemo |
Пример использования хуков
import { useEffect } from "react";
function MyComponent() {
useEffect(() => {
console.log("Монтирование компонента");
return () => {
console.log("Размонтирование компонента");
};
}, []);
return <div>Привет!</div>;
}
Совет:
В новых проектах лучше использовать функциональные компоненты с хуками — они проще, лаконичнее и рекомендуются сообществом React.