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

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

Методы жизненного цикла (Lifecycle Methods) в классовых компонентах React — это специальные функции, которые автоматически вызываются на разных этапах существования компонента: от его создания и монтирования в DOM до обновления и удаления. Они позволяют контролировать поведение компонента, выполнять side-эффекты, оптимизировать производительность и управлять состоянием.

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

Все методы жизненного цикла можно разделить на три основные фазы:

1. Монтирование (Mounting) — создание и вставка компонента в DOM.
2. Обновление (Updating) — изменение пропсов или состояния компонента.
3. Размонтирование (Unmounting) — удаление компонента из DOM.

Также существуют методы обработки ошибок (Error Handling), появившиеся в React 16.

Детальный разбор методов по фазам

Фаза монтирования

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // Инициализация состояния, привязка методов
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

  static getDerivedStateFromProps(props, state) {
    // Вызывается перед render() как при монтировании, так и при обновлении
    // Возвращает объект для обновления состояния или null
    return null;
  }

  componentDidMount() {
    // Вызывается после монтирования компонента в DOM
    // Идеальное место для запросов к API, подписок, работы с DOM
    fetch('/api/data').then(response => this.setState({ data: response }));
  }

  render() {
    // Обязательный метод, возвращает JSX
    return <div>Содержимое компонента</div>;
  }
}

Фаза обновления

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Оптимизационный метод: определяет, нужно ли повторно рендерить компонент
    // Возвращает true (по умолчанию) или false для предотвращения рендера
    return this.props.value !== nextProps.value;
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // Вызывается прямо перед применением изменений из render() к DOM
    // Возвращает значение, которое передается в componentDidUpdate()
    return { scrollPosition: window.scrollY };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // Вызывается после обновления компонента в DOM
    // Можно выполнять side-эффекты, сравнивая текущие и предыдущие пропсы/состояние
    if (this.props.userId !== prevProps.userId) {
      this.fetchUserData(this.props.userId);
    }
  }
}

Фаза размонтирования

class MyComponent extends React.Component {
  componentWillUnmount() {
    // Вызывается перед удалением компонента из DOM
    // Критически важно для очистки: отмена таймеров, отписок от событий, отмена сетевых запросов
    clearInterval(this.timerId);
    this.subscription.unsubscribe();
  }
}

Обработка ошибок

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Вызывается при ошибке в дочернем компоненте
    // Обновляет состояние для отображения запасного UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Вызывается при ошибке в дочернем компоненте
    // Можно отправить ошибку в систему мониторинга (Sentry, LogRocket)
    logErrorToService(error, errorInfo.componentStack);
  }
}

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

React 16.3 представил новые методы и объявил устаревшими некоторые старые:

• componentWillMount → Используйте constructor или componentDidMount
• componentWillReceiveProps → Заменен на getDerivedStateFromProps
• componentWillUpdate → Заменен на getSnapshotBeforeUpdate

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

• componentDidMount — наиболее часто используемый метод для side-эффектов (запросы данных, подписки).
• shouldComponentUpdate — мощный инструмент оптимизации, но в современных приложениях часто заменяется на React.PureComponent или React.memo для функциональных компонентов.
• getDerivedStateFromProps — следует использовать с осторожностью, так как он усложняет логику компонента. Часто лучшая альтернатива — полный контроль состояния в родительском компоненте.
• Error Boundaries — позволяют элегантно обрабатывать ошибки JavaScript в дочерних компонентах, предотвращая падение всего приложения.

Сравнение с функциональными компонентами и хуками

С появлением хуков (Hooks) в React 16.8, многие возможности методов жизненного цикла стали доступны в функциональных компонентах:

useEffect(() => {
  // Аналог componentDidMount и componentDidUpdate
  return () => {
    // Аналог componentWillUnmount
  };
}, [dependencies]);

useMemo(() => {
  // Аналог оптимизации через shouldComponentUpdate
}, [dependencies]);

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