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

Методы жизненного цикла (Lifecycle Methods) в React

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

Подход 1: Функциональные компоненты с Hooks

У функциональных компонентов жизненный цикл управляется через useEffect Hook:

Монтирование (componentDidMount):

useEffect(() => {
  console.log('Компонент смонтирован');
  return () => {
    console.log('Компонент удаляется');
  };
}, []);

Обновление при изменении зависимостей:

useEffect(() => {
  console.log('userId изменилась');
  loadUserData(userId);
}, [userId]);

После каждого рендера:

useEffect(() => {
  console.log('Выполняется после каждого рендера');
});

Подход 2: Классовые компоненты

constructor

Инициализация состояния и привязка методов:

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

componentDidMount

Выполняется после добавления компонента в DOM:

componentDidMount() {
  console.log('Компонент добавлен в DOM');
  this.loadData();
  window.addEventListener('resize', this.handleResize);
}

componentDidUpdate

Выполняется после обновления props или state:

componentDidUpdate(prevProps, prevState) {
  if (this.props.userId !== prevProps.userId) {
    this.loadUserData(this.props.userId);
  }
}

componentWillUnmount

Выполняется перед удалением компонента из DOM:

componentWillUnmount() {
  console.log('Компонент удаляется');
  window.removeEventListener('resize', this.handleResize);
}

shouldComponentUpdate

Оптимизация: контролирует необходимость ре-рендера:

shouldComponentUpdate(nextProps, nextState) {
  return this.props.value !== nextProps.value;
}

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

Mounting: constructor → render → componentDidMount

Updating: render → componentDidUpdate

Unmounting: componentWillUnmount

Практические примеры

Загрузка данных:

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]);
  
  return <div>{user?.name}</div>;
}

Подписка на события:

function WindowSize() {
  const [size, setSize] = useState(window.innerWidth);
  
  useEffect(() => {
    const handleResize = () => setSize(window.innerWidth);
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return <div>{size}px</div>;
}

Таймер:

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    
    return () => clearInterval(interval);
  }, []);
  
  return <div>{seconds}s</div>;
}

Сравнение таблица

Правила useEffect

1. Включай все зависимости в массив
2. Очищай побочные эффекты через return
3. Не вызывай условно (не в if внутри компонента)
4. Вызывай только в компонентах или кастомных Hooks

Ключевые моменты

• Hooks — современный подход, более гибкий
• useEffect управляет всеми фазами жизненного цикла
• Cleanup функция очищает ресурсы при демонтировании
• Зависимости контролируют когда эффект выполняется
• Классовые методы всё ещё работают, но считаются legacy

Современный React полностью перешёл на Hooks, которые предоставляют более чистый и удобный способ управления жизненным циклом компонентов.