Расскажите о жизненном цикле React-компонента.

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

Короткий ответ

Что ответить на собеседовании

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

Подробный разбор

Ответ с пояснениями

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

  • componentDidMount — вызывается после монтирования компонента;
  • componentDidUpdate — вызывается после обновления компонента;
  • componentWillUnmount — вызывается перед размонтированием компонента.

В функциональных компонентах с хуком useEffect эти методы можно эмулировать следующим образом:

import React, { useEffect } from 'react';

function MyComponent(props) {
  // componentDidMount
  useEffect(() => {
    // код, который выполнится один раз после монтирования
    console.log('Mounted');
  }, []); // пустой массив зависимостей

  // componentDidUpdate
  useEffect(() => {
    // код, который выполнится при изменении props или состояния
    console.log('Updated');
  }); // без второго аргумента — вызывается после каждого рендера

  // componentWillUnmount
  useEffect(() => {
    return () => {
      // код очистки перед размонтированием
      console.log('Unmounted');
    };
  }, []);

  return <div>{props.value}</div>;
}

Таким образом, useEffect с пустым массивом зависимостей эмулирует componentDidMount и componentWillUnmount (через функцию очистки), а useEffect без второго аргумента — componentDidUpdate.

Практика в реальном времени

Подготовьтесь к следующему собеседованию

Interview Boost учитывает вакансию, резюме и технологии и помогает сформулировать ответ прямо во время интервью.

Начать подготовку