Какие знаешь три основных методы жизненного цикла React приложения?

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

В React компоненты проходят через три основные фазы жизненного цикла: монтирование, обновление и размонтирование. Хотя с появлением React Hooks (в частности, useEffect) подход к обработке жизненного цикла изменился, классовые компоненты по-прежнему используют традиционные методы. Вот три ключевых метода, соответствующих основным фазам:

1. componentDidMount() - Фаза монтирования

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

• Загрузка данных с сервера (AJAX-запросы)
• Настройка подписок (например, на события WebSocket)
• Инициализация сторонних библиотек (например, D3.js или карты)

class ExampleComponent extends React.Component {
  componentDidMount() {
    // Пример загрузки данных
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
    
    // Пример подписки на событие
    window.addEventListener('resize', this.handleResize);
  }

  handleResize = () => {
    console.log('Window resized');
  }
  
  render() {
    return <div>Пример компонента</div>;
  }
}

2. componentDidUpdate(prevProps, prevState) - Фаза обновления

Вызывается после каждого обновления компонента (кроме первого рендера). Позволяет реагировать на изменения props или state. Важно избегать бесконечных циклов, аккуратно сравнивая предыдущие и текущие значения.

class ExampleComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    // Пример: загрузка новых данных при изменении пропса userId
    if (this.props.userId !== prevProps.userId) {
      this.fetchUserData(this.props.userId);
    }
    
    // Пример: обновление документа при изменении состояния
    if (this.state.theme !== prevState.theme) {
      document.body.className = this.state.theme;
    }
  }
  
  fetchUserData(userId) {
    // Запрос данных пользователя
  }
  
  render() {
    return <div>Пример с обновлением</div>;
  }
}

3. componentWillUnmount() - Фаза размонтирования

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

• Отмена активных HTTP-запросов
• Удаление подписок на события
• Остановка таймеров

class ExampleComponent extends React.Component {
  componentDidMount() {
    this.timerId = setInterval(() => {
      console.log('Таймер работает');
    }, 1000);
  }
  
  componentWillUnmount() {
    // Очистка таймера перед удалением компонента
    clearInterval(this.timerId);
    console.log('Компонент будет размонтирован, таймер очищен');
  }
  
  render() {
    return <div>Компонент с таймером</div>;
  }
}

Эволюция подхода с Hooks

С появлением функциональных компонентов и Hooks, React предлагает более декларативный способ управления побочными эффектами через useEffect:

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

function FunctionalComponent({ userId }) {
  const [data, setData] = useState(null);
  
  // Аналог componentDidMount
  useEffect(() => {
    console.log('Компонент смонтирован');
    
    return () => {
      // Аналог componentWillUnmount
      console.log('Компонент будет размонтирован');
    };
  }, []);
  
  // Аналог componentDidUpdate для userId
  useEffect(() => {
    if (userId) {
      fetch(`https://api.example.com/users/${userId}`)
        .then(response => response.json())
        .then(setData);
    }
  }, [userId]); // Зависимость: эффект сработает при изменении userId
  
  return <div>{data ? data.name : 'Загрузка...'}</div>;
}

Ключевые принципы работы с жизненным циклом

• Инициализация в componentDidMount: Избегайте побочных эффектов в constructor или render, используйте componentDidMount.
• Оптимизация обновлений: Используйте shouldComponentUpdate или React.memo для предотвращения лишних ререндеров.
• Предотвращение утечек: Всегда очищайте ресурсы в componentWillUnmount.
• Условное выполнение в componentDidUpdate: Всегда сравнивайте предыдущие и текущие значения перед выполнением операций.
• Асинхронные операции: Обрабатывайте асинхронные операции аккуратно, отменяя их при размонтировании.

Хотя сегодня рекомендуется использовать функциональные компоненты с Hooks, понимание методов жизненного цикла классовых компонентов остается важным для работы с легаси-кодом и глубокого понимания работы React.