Что такое жизненный цикл компонента в React?react-13

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

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

React компоненты проходят три основные фазы:

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

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

Монтирование

1. constructor() — инициализация состояния и привязка методов
2. static getDerivedStateFromProps() — синхронизация state с props (редко используется)
3. render() — подготовка JSX
4. componentDidMount() — вызов после вставки в DOM (идеально для side-эффектов)

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

  componentDidMount() {
    fetchData().then(data => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

Обновление

1. static getDerivedStateFromProps() — перед рендером
2. shouldComponentUpdate() — оптимизация (возвращает boolean)
3. render() — перерендер
4. getSnapshotBeforeUpdate() — захват информации DOM перед изменением
5. componentDidUpdate() — после обновления DOM

shouldComponentUpdate(nextProps, nextState) {
  return nextProps.id !== this.props.id; // Оптимизация: рендер только при изменении id
}

componentDidUpdate(prevProps, prevState, snapshot) {
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Размонтирование

1. componentWillUnmount() — очистка перед удалением (таймеры, подписки)

componentWillUnmount() {
  clearInterval(this.timerID);
  this.subscription.unsubscribe();
}

3. Жизненный цикл в функциональных компонентах

С появлением Hooks жизненный цикл реализуется через:

1. useEffect(() => {}, []) — аналог componentDidMount (пустой массив зависимостей)
2. useEffect(() => {}) — аналог componentDidUpdate (без массива)
3. useEffect(() => { return () => {} }) — аналог componentWillUnmount (функция возврата)

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

  useEffect(() => {
    const subscription = subscribeToData(userId, setData);
    return () => subscription.unsubscribe(); // Очистка
  }, [userId]); // Зависимость - userId

  return <div>{data}</div>;
}

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

Следует избегать:

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

Вместо них используйте:

• getDerivedStateFromProps
• getSnapshotBeforeUpdate

5. Ошибки и их обработка

1. static getDerivedStateFromError() — обновление state при ошибке
2. componentDidCatch() — логирование ошибок

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

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

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

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

6. Оптимизация жизненного цикла

1. Мемоизация: React.memo, useMemo, useCallback
2. Разделение кода: React.lazy + Suspense
3. Предотвращение рендеров: правильное использование shouldComponentUpdate

Резюмируем

1. Жизненный цикл состоит из трех фаз: монтирование, обновление, размонтирование
2. В классовых компонентах используются методы жизненного цикла
3. В функциональных компонентах — хуки (преимущественно useEffect)
4. Ошибки обрабатываются через Error Boundaries
5. Современный React рекомендует функциональные компоненты с хуками
6. Понимание жизненного цикла необходимо для:
   • Оптимизации производительности
   • Правильной работы с side-эффектами
   • Управления подписками и ресурсами

Правильное использование методов жизненного цикла делает приложения более предсказуемыми и эффективными.