Sobes.tech
Back to questions
Middle+
2

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

Companies where asked
Copperside

Answer from AI

sobes.tech AI

Жизненный цикл компонента в React описывает последовательность этапов от создания до удаления компонента из DOM. Основные методы жизненного цикла, которые я использую и знаю, включают:

  • constructor(props) — инициализация состояния и привязка методов.
  • componentDidMount() — вызывается после монтирования компонента, здесь удобно делать запросы к API или подписываться на события.
  • shouldComponentUpdate(nextProps, nextState) — позволяет оптимизировать рендер, возвращая true или false.
  • componentDidUpdate(prevProps, prevState) — вызывается после обновления, можно реагировать на изменения пропсов или состояния.
  • componentWillUnmount() — очистка таймеров, отписка от событий.

В функциональных компонентах с хуками жизненный цикл управляется через useEffect, где можно имитировать поведение componentDidMount, componentDidUpdate и componentWillUnmount.

Пример с хуком useEffect:

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    return () => clearInterval(id); // очистка при размонтировании
  }, []); // пустой массив — эффект сработает один раз при монтировании

  return <div>Секунд прошло: {count}</div>;
}