Жизненный цикл React

В React жизненный цикл (lifecycle) компонента — это совокупность различных этапов, через которые проходит компонент. Эти этапы позволяют разработчикам запускать определённый код в ключевые моменты, такие как создание, обновление или удаление компонента. Понимание жизненного цикла React помогает эффективнее управлять ресурсами, побочными эффектами и производительностью приложения.

Что такое жизненный цикл React?

Жизненный цикл React — это разные фазы, которые проходит компонент в течение своего времени работы в React-приложении. Эти фазы дают возможность запускать конкретный код в важные моменты жизни компонента, например, когда он создаётся, обновляется или удаляется с экрана.

Основные три фазы жизненного цикла компонента React

Методы жизненного цикла React

Монтаж (Mounting): инициализация, рендеринг и вставка компонента в DOM (componentDidMount()).
Обновление (Updating): обработка изменений состояния (state) или пропсов (props), повторный рендеринг и обновление (componentDidUpdate()).
Размонтирование (Unmounting): очистка и подготовка к удалению компонента (componentWillUnmount()).

Фазы жизненного цикла компонентов React

1. Монтаж (Mounting)

Монтаж — это процесс создания и вставки компонента в DOM впервые в React-приложении. Во время монтажа React инициализирует компонент, настраивает его внутреннее состояние (если оно есть) и вставляет его в DOM.

constructor
getDerivedStateFromProps
render()
componentDidMount()

`constructor()`

Метод для инициализации состояния и привязки методов. Выполняется перед монтажом компонента.

constructor(props) {
    super(props); // Всегда вызывайте super(props) перед использованием this.props
    this.state = {
        count: 0, // Начальное состояние
    };
    console.log("Конструктор вызван");
}

`getDerivedStateFromProps(props, state)`

Используется для обновления состояния на основе пропсов. Вызывается перед каждым вызовом render().

static getDerivedStateFromProps(props, state) {
    if (props.value !== state.value) {
        return { value: props.value }; // Обновляем состояние при изменении пропсов
    }
    return null; // Без изменений в состоянии
}

`render()` метод

Отвечает за отображение JSX и обновление DOM.

render() {
    return (
        <div>
            <h1>Hello, React Lifecycle!</h1>
        </div>
    );
}

Функция `componentDidMount()`

Вызывается сразу после того, как компонент был смонтирован в DOM. Эта функция запускается один раз после первого вызова render().

componentDidMount() {
    console.log("Компонент был смонтирован");

    // Пример: получение данных с API
    fetch("https://api.example.com/data")
        .then(response => response.json())
        .then(data => this.setState({ data }));
}

2. Обновление (Updating)

Обновление — это процесс повторного рендеринга компонента из-за изменений в его состоянии (state) или пропсах (props). Фаза обновления происходит каждый раз, когда внутреннее состояние компонента изменяется или когда родительский компонент передаёт новые пропсы. React заново рендерит компонент, отражая изменения, и обновляет DOM соответствующим образом.

getDerivedStateFromProps
setState() функция
shouldComponentUpdate()
getSnapshotBeforeUpdate()
componentDidUpdate()

`getDerivedStateFromProps`

getDerivedStateFromProps(props, state) — статический метод, вызывающийся непосредственно перед render() как на этапе монтажа, так и при обновлении. Принимает обновлённые пропсы и текущее состояние.

static getDerivedStateFromProps(props, state) {
    if (props.name !== state.name) {
        return { name: props.name }; // Обновление состояния на основе новых пропсов
    }
    return null; // Без изменений в состоянии
}

Функция `setState()`

Это не чисто функция жизненного цикла, а метод для явного обновления состояния компонента в любой момент. Подробнее можно ознакомиться в этой статье.

this.setState((prevState, props) => ({
      counter: prevState.count + props.diff
}));

`shouldComponentUpdate()`

Метод жизненного цикла классовых компонентов React, который решает, должен ли компонент перерендериваться. Сравнивает текущие и следующие пропсы/состояние и возвращает true, если обновление необходимо, или false, если нет.

shouldComponentUpdate(nextProps, nextState)

Если возвращается false, то методы render(), componentWillUpdate() и componentDidUpdate() не вызываются.

Метод `getSnapshotBeforeUpdate()`

Вызывается непосредственно перед изменением DOM. Позволяет сохранить предыдущие значения состояния перед обновлением DOM.

getSnapshotBeforeUpdate(prevProps, prevState)

`componentDidUpdate()`

Вызывается после того, как компонент отрендерился, то есть после обновления состояния или пропсов.

componentDidUpdate(prevProps, prevState, snapshot)

3. Размонтирование (Unmounting)

Это конечная фаза жизненного цикла компонента, во время которой происходит удаление компонента из DOM. В этой фазе используется единственный метод.

`componentWillUnmount()`

Вызывается до окончательного удаления компонента из DOM. Этот метод запускается один раз перед удалением компонента со страницы и обозначает завершение жизненного цикла.

Реализация методов жизненного цикла компонента

Давайте рассмотрим пример, который поможет закрепить изученный материал.

Сначала создайте React-приложение и отредактируйте файл index.js из папки src.

// Файл - src/index.js:
import React from "react";
import ReactDOM from 'react-dom';

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hello: "World!" };
    }
    componentDidMount() {
        console.log("componentDidMount()");
    }
    changeState() {
        this.setState({ hello: "Geek!" });
    }
    render() {
        return (
            <div>
                <h1>
                    GeeksForGeeks.org, Hello {this.state.hello}
                </h1>
                <h2>
                    <a onClick={this.changeState.bind(this)}>
                        Press Here!
                    </a>
                </h2>
            </div>
        );
    }
    shouldComponentUpdate(nextProps, nextState) {
        console.log("shouldComponentUpdate()");
        return true;
    }
    componentDidUpdate() {
        console.log("componentDidUpdate()");
    }
}

const root = ReactDOM.createRoot(
    document.getElementById("root")
);
root.render(<Test />);

Результат

Ключевые моменты этого примера:

Класс Test — компонент React с состоянием hello, изначально установленным в «World!».
Метод componentDidMount() вызывается после добавления компонента в DOM и выводит в консоль сообщение «componentDidMount()».
Метод changeState() обновляет состояние, меняя hello на «Geek!» при вызове.
В методе render() выводится значение состояния hello внутри тега <h1>, также есть ссылка, которая при клике вызывает функцию changeState().
Метод shouldComponentUpdate() выводит «shouldComponentUpdate()» в консоль и разрешает перерендеринг, а componentDidUpdate() выводит «componentDidUpdate()» после обновления.

Таблица методов жизненного цикла React

Метод жизненного цикла	Фаза	Назначение
`constructor()`	Монтаж	Инициализация состояния, привязка методов
`getDerivedStateFromProps()`	Монтаж и обновление	Синхронизация состояния с пропсами
`render()`	Монтаж и обновление	Возвращает JSX для отображения
`componentDidMount()`	Монтаж	Запуск побочных эффектов (например, запросы к API)
`shouldComponentUpdate()`	Обновление	Контроль необходимости перерендеринга
`getSnapshotBeforeUpdate()`	Обновление	Фиксация значений перед обновлением
`componentDidUpdate()`	Обновление	Выполнение побочных эффектов после обновления
`componentWillUnmount()`	Размонтирование	Очистка ресурсов перед удалением компонента

Зачем нужен жизненный цикл React?

Жизненный цикл обеспечивает структурированный способ выполнения определённых задач в разное время жизни компонента — при создании, обновлении или удалении.

Получение данных: методы жизненного цикла, такие как componentDidMount() и componentDidUpdate(), позволяют загружать данные, подписываться на сервисы или обновлять внешние ресурсы когда это необходимо.
Оптимизация производительности: управление моментами выполнения действий (например, с помощью shouldComponentUpdate() можно избежать лишних перерендерингов) помогает сделать приложение более эффективным.
Управление ресурсами: жизненный цикл помогает корректно очищать ресурсы: удалять обработчики событий, отменять сетевые запросы, очищать таймеры с помощью методов типа componentWillUnmount(), чтобы избежать утечек памяти.
Обработка изменений состояния и пропсов: предоставляет хуки для контролируемого обновления и реакции на изменения состояния или пропсов, что даёт динамичное и интерактивное поведение компонентам.
Обработка удаления компонента: при завершении жизненного цикла помогает аккуратно очистить ресурсы и остановить повторяющиеся процессы.

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

В классовых компонентах используются разные методы для управления состоянием и побочными эффектами, что может быть сложнее.
В функциональных компонентах хуки, такие как useState() и useEffect(), значительно упрощают управление состоянием и побочными эффектами, делая код короче и понятнее. Функциональные компоненты часто предпочтительнее из-за более чистой структуры и простоты понимания.

Особенности	Классовые компоненты	Функциональные компоненты
Инициализация состояния	`constructor()`	`useState()`
Методы жизненного цикла	`componentDidMount()`, `shouldComponentUpdate()`, `componentDidUpdate()`, `componentWillUnmount()`	`useEffect()` управляет монтажом, обновлением и размонтированием
Обработка обновлений	`shouldComponentUpdate()`, `componentDidUpdate()`	`useEffect()` с массивом зависимостей
Очистка	`componentWillUnmount()`	Функция очистки, возвращаемая из `useEffect()`
Функционал	Методы компонента, связанные с фазами жизненного цикла	Хуки: `useState`, `useEffect`, `useCallback`, `useMemo`

Заключение

Жизненный цикл компонента React — это ключевой механизм для управления поведением компонента, обработки его состояния и пропсов, а также оптимизации производительности приложения. Эффективное использование методов жизненного цикла позволяет разработчикам обеспечивать эффективный рендеринг и правильное управление ресурсами на протяжении всей жизни компонента.

🔑 Ключевые моменты:

Жизненный цикл React состоит из трёх основных фаз: монтаж, обновление и размонтирование.
Методы жизненного цикла позволяют запускать код в ключевые моменты жизни компонента: инициализацию, обновление и очистку.
В функциональных компонентах хуки useState и useEffect упрощают работу с состоянием и побочными эффектами по сравнению с классовыми компонентами.
Правильное управление жизненным циклом помогает оптимизировать производительность и избегать утечек памяти.
Методы жизненного цикла обеспечивают структурированный подход к управлению состоянием и ресурсами компонента.

Что такое жизненный цикл React?

Фазы жизненного цикла компонентов React

1. Монтаж (Mounting)

constructor()

getDerivedStateFromProps(props, state)

render() метод

Функция componentDidMount()

2. Обновление (Updating)

getDerivedStateFromProps

Функция setState()

shouldComponentUpdate()

Метод getSnapshotBeforeUpdate()

componentDidUpdate()