PrepBro
← Назад к вопросам

В чем разница между очисткой и размонтированием?

2.0 Middle🔥 171 комментариев
#Архитектура и паттерны

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Разница между очисткой и размонтированием компонента

Это два важных но разных процесса в жизненном цикле React компонента. Часто они путаются, но выполняют разные функции.

Что такое очистка (cleanup/cleanup function)?

Очистка — это функция, которая вызывается перед тем, как эффект запустится заново или перед размонтированием компонента. Она нужна для того, чтобы удалить побочные эффекты, которые создал эффект.

Очистка используется в useEffect через return функцию:

function ChatComponent() {
  useEffect(() => {
    const handleNewMessage = (msg) => {
      console.log("Новое сообщение:", msg);
    };
    
    window.addEventListener("message", handleNewMessage);
    
    return () => {
      window.removeEventListener("message", handleNewMessage);
    };
  }, []);
  
  return <div>Чат</div>;
}

Что такое размонтирование (unmount)?

Размонтирование — это когда компонент полностью удаляется из DOM. Это происходит, когда родитель перестал его рендерить, произошла навигация или элемент был условно скрыт.

function App() {
  const [showChat, setShowChat] = useState(true);
  
  return (
    <div>
      {showChat && <ChatComponent />}
      <button onClick={() => setShowChat(false)}>
        Закрыть чат
      </button>
    </div>
  );
}

Основные отличия

ХарактеристикаОчисткаРазмонтирование
Что это?Функция, убирающая побочные эффектыПроцесс удаления компонента из DOM
Когда вызывается?Перед повторным эффектом или размонтированиемОдин раз, когда компонент удаляется
Почему нужна?Чтобы избежать утечек памятиЗавершение жизненного цикла

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

Пример 1: Таймер

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

Пример 2: Подписка на WebSocket

function Chat() {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    const ws = new WebSocket("wss://chat.example.com");
    
    ws.onmessage = (event) => {
      setMessages(prev => [...prev, event.data]);
    };
    
    return () => {
      ws.close();
    };
  }, []);
  
  return <div>{messages.map((msg, i) => <p key={i}>{msg}</p>)}</div>;
}

Главное правило

Очистка — часть useEffect, которая убирает побочные эффекты. Размонтирование — процесс удаления компонента из DOM, при котором вызывается функция очистки.

В чем разница между очисткой и размонтированием? | PrepBro