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

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

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

Фаза монтирования (Mounting)

Эти методы вызываются при создании компонента и его вставке в DOM:

• constructor(): Инициализация состояния и привязки методов. Вызывается первым.
• static getDerivedStateFromProps(): Редко используется. Позволяет обновить состояние на основе пропсов перед рендерингом.
• render(): Обязательный метод, который возвращает JSX. Не должен изменять состояние.
• componentDidMount(): Вызывается после того, как компонент отрендерился в DOM. Идеальное место для выполнения запросов к API, подписки на события или работы с DOM.

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    // Запрос данных после монтирования
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data ? this.state.data : 'Loading...'}</div>;
  }
}

Фаза обновления (Updating)

Методы вызываются при изменении пропсов или состояния:

• static getDerivedStateFromProps(): Также вызывается при обновлении.
• shouldComponentUpdate(nextProps, nextState): Позволяет оптимизировать производительность, возвращая false для предотвращения ненужного ререндера. Альтернатива — использование PureComponent.
• render(): Перерисовывает компонент с новыми данными.
• getSnapshotBeforeUpdate(prevProps, prevState): Позволяет захватить информацию из DOM (например, позицию прокрутки) перед её обновлением. Возвращаемое значение передаётся в componentDidUpdate.
• componentDidUpdate(prevProps, prevState, snapshot): Вызывается после обновления DOM. Подходит для выполнения побочных эффектов на основе изменений, но требует проверки условий, чтобы избежать бесконечных циклов.

class UpdateExample extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Рендерим только если изменилось конкретное значение
    return this.props.value !== nextProps.value;
  }

  componentDidUpdate(prevProps) {
    if (this.props.value !== prevProps.value) {
      console.log(`Value changed to: ${this.props.value}`);
    }
  }

  render() {
    return <div>{this.props.value}</div>;
  }
}

Фаза размонтирования (Unmounting)

• componentWillUnmount(): Вызывается непосредственно перед удалением компонента из DOM. Критически важно для очистки ресурсов: отмена таймеров, отписывание от событий, отмена сетевых запросов.

class TimerComponent extends React.Component {
  constructor(props) {
    super(props);
    this.timer = null;
  }

  componentDidMount() {
    this.timer = setInterval(() => console.log('Tick'), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer); // Очистка таймера
  }

  render() {
    return <div>Timer is running (check console)</div>;
  }
}

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

React 17+ устарели методы вроде componentWillMount, componentWillReceiveProps, и componentWillUpdate. Вместо них рекомендуется использовать современные API:

• Хуки (Hooks): Для функциональных компонентов, useEffect покрывает большинство сценариев componentDidMount, componentDidUpdate и componentWillUnmount.
• static getDerivedStateFromProps() и getSnapshotBeforeUpdate(): Более безопасные альтернативы устаревшим методам, хотя их применение специфично.

Ключевые принципы использования

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

Понимание жизненного цикла критично для создания стабильных и производительных React-приложений, особенно при работе с внешними данными, подписками и ручным управлением DOM.