Что такое жизненный цикл компонента в 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-эффектами
    • Управления подписками и ресурсами

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

Вопросы

Собеседования