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

Жизненный цикл компонента в React: методы на каждом этапе

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

Фаза 1: Монтирование (Mounting)

Методы, вызываемые при создании компонента и его вставке в DOM.

1. constructor(props):

    *   Вызывается до монтирования компонента.
    *   Используется для инициализации состояния (`this.state`) и привязки методов.
    *   **Важно:** Всегда вызывать `super(props)` в начале.

```javascript
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
}
```

2. static getDerivedStateFromProps(props, state):

    *   Вызывается непосредственно перед рендерингом, как при монтировании, так и при обновлениях.
    *   Должен возвращать объект для обновления состояния или `null`.
    *   Используется редко, для случаев, когда состояние зависит от изменений пропсов во времени.

1. render():

    *   Единственный **обязательный** метод в классовом компоненте.
    *   Анализирует `this.props` и `this.state` и возвращает JSX, портал, строку, число, `null` или `boolean`.
    *   Должен быть чистым (без побочных эффектов).

```javascript
render() {
  return <div>Count: {this.state.count}</div>;
}
```

4. componentDidMount():

    *   Вызывается сразу после монтирования компонента (вставки в DOM).
    *   **Идеальное место для:** выполнения AJAX-запросов, подписок на события, работы с DOM напрямую, установки таймеров.

```javascript
async componentDidMount() {
  const data = await fetchData();
  this.setState({ data });
  window.addEventListener('resize', this.handleResize);
}
```

Фаза 2: Обновление (Updating)

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

1. static getDerivedStateFromProps(props, state):

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

1. shouldComponentUpdate(nextProps, nextState):

    *   Позволяет оптимизировать производительность, предотвращая лишние ререндеры.
    *   По умолчанию возвращает `true`. Если возвращает `false`, методы `render()`, `getSnapshotBeforeUpdate()` и `componentDidUpdate()` вызваны не будут.
    *   **Альтернатива в функциональных компонентах:** `React.memo()` или `useMemo`.

```javascript
shouldComponentUpdate(nextProps, nextState) {
  return this.state.count !== nextState.count;
}
```

3. render():

    *   Вызывается повторно для определения, что должно отобразиться.

1. getSnapshotBeforeUpdate(prevProps, prevState):

    *   Вызывается прямо перед тем, как сгенерированный вывод будет зафиксирован в DOM (например, перед обновлением списка).
    *   Позволяет компоненту получить информацию из DOM (например, позицию скролла) до возможного изменения.
    *   Любое значение, возвращаемое этим методом, будет передано третьим параметром в `componentDidUpdate()`.

1. componentDidUpdate(prevProps, prevState, snapshot):

    *   Вызывается сразу после обновления. Не вызывается при первом рендере.
    *   **Идеальное место для:** выполнения сетевых запросов при изменении пропсов (с обязательным сравнением!), работы с DOM.
    *   **Важно:** Всегда использовать условие, чтобы избежать бесконечного цикла.

```javascript
componentDidUpdate(prevProps) {
  if (this.props.userId !== prevProps.userId) {
    this.fetchUserData(this.props.userId);
  }
}
```

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

Метод, вызываемый при удалении компонента из DOM.

1. componentWillUnmount():

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

```javascript
componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
  clearInterval(this.timerId);
}
```

Фаза обработки ошибок (Error Handling)

Методы, вызываемые при возникновении ошибки в дочернем компоненте.

1. static getDerivedStateFromError(error):

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

1. componentDidCatch(error, errorInfo):

    *   Вызывается после возникновения ошибки. Позволяет выполнить побочные эффекты (например, логирование ошибки).

```javascript
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так.</h1>;
    }
    return this.props.children;
  }
}
```

Эволюция с появлением Hooks

В функциональных компонентах все эти фазы охватываются одним хуком useEffect, который объединяет логику componentDidMount, componentDidUpdate и componentWillUnmount.

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

function MyFunctionalComponent({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Аналог componentDidMount и componentDidUpdate (для userId)
    fetchData(userId).then(setData);

    // Функция, возвращаемая из useEffect - аналог componentWillUnmount
    return () => {
      // Очистка подписок, таймеров
    };
  }, [userId]); // Массив зависимостей: эффект запустится при изменении userId

  return <div>{data ? data.name : 'Loading...'}</div>;
}

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