Sobes.tech
Назад к вопросам
Middle
2

Какие методы жизненного цикла существуют в React и как их эмулировать с помощью useEffect?

Компании, где спрашивали
WildberriesWildberries

Ответ от нейросети

sobes.tech AI

В 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.