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

Жизненный цикл классового компонента React

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

Фазы жизненного цикла

1. Монтирование (Mounting)

Эта фаза происходит при создании и вставке компонента в DOM.

Порядок вызова методов:

1. constructor() - вызывается при создании экземпляра компонента. Здесь инициализируют состояние (state) и привязывают методы (bind).

2. getDerivedStateFromProps() - статический метод, вызывается перед рендерингом, как при монтировании, так и при обновлении. Используется редко, для синхронизации state с props.

3. render() - единственный обязательный метод. Возвращает JSX для отображения.

4. componentDidMount() - вызывается после вставки компонента в DOM. Идеальное место для:

   • Загрузки данных с сервера (API запросы)
   • Подписки на события
   • Инициализация таймеров и интервалов

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null, loading: true };
  }

  componentDidMount() {
    fetch(/api/data)
      .then(res => res.json())
      .then(data => this.setState({ data, loading: false }));
  }

  render() {
    return <div>{this.state.loading ? "Загрузка..." : this.state.data}</div>;
  }
}

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

Эта фаза происходит при изменении props или state компонента.

Порядок вызова:

1. getDerivedStateFromProps() - вызывается снова перед рендерингом

2. shouldComponentUpdate() - позволяет контролировать, нужно ли перерендеривать компонент. Возвращает boolean. Используется для оптимизации производительности.

3. render() - перерендеривает компонент

4. getSnapshotBeforeUpdate() - вызывается после рендера, но перед обновлением DOM. Полезна для сохранения информации о DOM (например, позиция скролла).

5. componentDidUpdate() - вызывается после обновления DOM. Получает previousProps и previousState. Идеальное место для:

   • Операций с DOM
   • Новых API запросов на основе изменённых props
   • Синхронизации с внешними библиотеками

class Counter extends React.Component {
  state = { count: 0 };

  shouldComponentUpdate(nextProps, nextState) {
    // Перерендеривать только если count изменился
    return nextState.count !== this.state.count;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`Счётчик обновился: ${prevState.count} -> ${this.state.count}`);
    }
  }

  render() {
    return (
      <div>
        <p>Счёт: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Увеличить
        </button>
      </div>
    );
  }
}

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

Эта фаза происходит при удалении компонента из DOM.

Единственный метод:

componentWillUnmount() - вызывается перед удалением компонента. Обязателен для очистки:

• Отписки от подписок (subscriptions)
• Отмены таймеров и интервалов
• Отписки от event listeners
• Очистки ресурсов

class Timer extends React.Component {
  componentDidMount() {
    this.interval = setInterval(() => {
      console.log(Тик);
    }, 1000);
  }

  componentWillUnmount() {
    // Критично очистить интервал!
    clearInterval(this.interval);
  }

  render() {
    return <div>Таймер запущен</div>;
  }
}

Диаграмма жизненного цикла

МОНТИРОВАНИЕ:
constructor → getDerivedStateFromProps → render → componentDidMount

ОБНОВЛЕНИЕ (при изменении props или state):
getDerivedStateFromProps → shouldComponentUpdate → render → getSnapshotBeforeUpdate → componentDidUpdate

ДЕМОНТИРОВАНИЕ:
componentWillUnmount → удаление из DOM

Устаревшие методы

Некоторые методы помечены как устаревшие (deprecated) и будут удалены в будущих версиях React:

• componentWillMount() - заменён на constructor и componentDidMount
• componentWillReceiveProps() - заменён на getDerivedStateFromProps
• componentWillUpdate() - заменён на getSnapshotBeforeUpdate

// Не используй это!
class OldComponent extends React.Component {
  componentWillMount() {
    // ❌ DEPRECATED - используй constructor вместо этого
  }
}

Практические рекомендации

1. Для побочных эффектов - используй componentDidMount и componentDidUpdate для загрузки данных и подписок

2. Для оптимизации - реализуй shouldComponentUpdate или используй React.PureComponent для предотвращения ненужных перерендеров

3. Для очистки - всегда реализуй componentWillUnmount для очистки ресурсов, особенно интервалов и подписок

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

// Современный подход с хуками вместо классов
function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Монтирование и обновление
    fetch(/api/data)
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });

    // Демонтирование (cleanup function)
    return () => {
      // Очистка при размонтировании
    };
  }, []);

  return <div>{loading ? "Загрузка..." : data}</div>;
}

Вывод

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