Какие методы жизненного цикла нельзя реализовать в функциональном компоненте?

Методы жизненного цикла в React функциональных компонентах

Этот вопрос касается React, а не Node.js backend, но это важная знание для full-stack разработчика. Расскажу про различия между классовыми и функциональными компонентами.

Классовые компоненты (Class Components)

У классовых компонентов есть явные методы жизненного цикла:

class MyComponent extends React.Component {
  // Mounting phase
  constructor(props) {}
  componentWillMount() {}  // Deprecated
  render() {}
  componentDidMount() {}  // После рендера
  
  // Updating phase
  componentWillReceiveProps(nextProps) {}  // Deprecated
  shouldComponentUpdate(nextProps, nextState) {}
  componentWillUpdate(nextProps, nextState) {}  // Deprecated
  render() {}
  componentDidUpdate(prevProps, prevState) {}  // После update
  
  // Unmounting phase
  componentWillUnmount() {}  // Очистка перед удалением
  
  // Error handling
  componentDidCatch(error, errorInfo) {}  // Ловит ошибки
}

Функциональные компоненты (Functional Components)

Функциональные компоненты НЕ имеют вышеперечисленных методов.

Вместо них используются React Hooks:

function MyComponent(props) {
  // ❌ Невозможно использовать методы жизненного цикла
  // componentDidMount() {}  // Это не сработает
  // componentDidUpdate() {}  // Это не сработает
  
  // ✅ Используем hooks вместо них
  React.useEffect(() => {
    // Эквивалент componentDidMount + componentDidUpdate
    return () => {}; // Эквивалент componentWillUnmount
  }, [dependency]);
  
  return <div>Component</div>;
}

Отображение методов жизненного цикла на Hooks

1. componentDidMount → useEffect с пустым dependency array

// Классовый компонент
class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Компонент смонтирован');
    this.loadData();
  }
}

// Функциональный компонент
function MyComponent() {
  useEffect(() => {
    console.log('Компонент смонтирован');
    loadData();
  }, []);  // Пустой dependency array = выполняется 1 раз
}

2. componentDidUpdate → useEffect с dependency array

// Классовый компонент
class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.id !== this.props.id) {
      this.loadData(this.props.id);
    }
  }
}

// Функциональный компонент
function MyComponent({ id }) {
  useEffect(() => {
    loadData(id);
  }, [id]);  // Выполняется когда id меняется
}

3. componentWillUnmount → useEffect cleanup function

// Классовый компонент
class MyComponent extends React.Component {
  componentDidMount() {
    this.unsubscribe = subscribe(this.handleChange);
  }
  
  componentWillUnmount() {
    this.unsubscribe();
  }
}

// Функциональный компонент
function MyComponent() {
  useEffect(() => {
    const unsubscribe = subscribe(handleChange);
    return () => unsubscribe();  // Cleanup function
  }, []);
}

4. shouldComponentUpdate → useMemo / React.memo

// Классовый компонент
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.id !== this.props.id;
  }
}

// Функциональный компонент
function MyComponent({ id }) {
  return <div>{id}</div>;
}

export default React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id;  // true = skip render
});

5. componentDidCatch → Error Boundary (всё ещё требует класса!)

// Error Boundary ДОЛЖЕН быть классовым компонентом
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }
  
  static getDerivedStateFromError(error) {
    return { hasError: true };
  }
  
  componentDidCatch(error, errorInfo) {
    console.error('Ошибка поймана:', error);
  }
  
  render() {
    if (this.state.hasError) {
      return <h1>Что-то пошло не так</h1>;
    }
    return this.props.children;
  }
}

// Использование
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

⚠️ Важно: Error Boundaries нельзя реализовать через hooks! Это исключение из правила.

Какие методы нельзя реализовать в функциональных компонентах?

Методы, которых нет в функциональных компонентах:

1. componentDidCatch — ловля ошибок (нужен Error Boundary класс)
2. getDerivedStateFromError — обработка ошибок
3. componentWillMount — deprecated и заменён на useEffect
4. componentWillReceiveProps — deprecated и заменён на useEffect
5. componentWillUpdate — deprecated и заменён на useEffect

Всё остальное может быть реализовано через hooks.

Таблица эквивалентности

Практический пример: реальный компонент

// Классовый компонент
class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = { user: null, loading: true };
  }
  
  componentDidMount() {
    this.fetchUser();
  }
  
  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchUser();
    }
  }
  
  fetchUser = async () => {
    const user = await api.getUser(this.props.userId);
    this.setState({ user, loading: false });
  }
  
  componentWillUnmount() {
    // Отменяем запрос если компонент удалился
    this.isMounted = false;
  }
  
  render() {
    const { user, loading } = this.state;
    if (loading) return <div>Loading...</div>;
    return <div>{user.name}</div>;
  }
}

// Эквивалент функциональным компонентом
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    let isMounted = true;
    
    const fetchUser = async () => {
      const userData = await api.getUser(userId);
      if (isMounted) {  // Проверяем, не удалился ли компонент
        setUser(userData);
        setLoading(false);
      }
    };
    
    fetchUser();
    
    // Cleanup function (эквивалент componentWillUnmount)
    return () => {
      isMounted = false;
    };
  }, [userId]);  // Re-run когда userId меняется
  
  if (loading) return <div>Loading...</div>;
  return <div>{user?.name}</div>;
}

Modern React: Hooks вытесняют классы

С версии React 16.8 (2019) функциональные компоненты + hooks — это preferred way.

React team рекомендует:

• ✅ Функциональные компоненты + hooks
• ⚠️ Классовые компоненты только для Error Boundaries
• ❌ Старые методы жизненного цикла

Вывод

В функциональных компонентах нельзя реализовать:

1. componentDidCatch — нужна Error Boundary
2. getDerivedStateFromError — нужна Error Boundary

Всё остальное может быть реализовано через useEffect и другие hooks.

Это важное изменение в парадигме React: от методов жизненного цикла к effect hooks, которые более гибкие и понятные.