Create: Update:
Как отследить демонтирование функционального компонента?
В функциональных компонентах React можно отслеживать демонтирование компонента с помощью хука useEffect. Когда компонент демонтируется, React вызывает функцию очистки, которую можно определить внутри useEffect.
import React, { useEffect } from 'react';
const MyComponent = () => {
useEffect(() => {
console.log('Component mounted');
// Функция очистки вызывается при демонтировании компонента
return () => {
console.log('Component will unmount');
};
}, []); // Пустой массив зависимостей означает, что эффект выполнится только при монтировании и демонтировании
return (
<div>
<p>My Component</p>
</div>
);
};
export default MyComponent;Пример с реальным использованием
import React, { useEffect, useState } from 'react';
const WebSocketComponent = () => {
const [messages, setMessages] = useState([]);
useEffect(() => {
const socket = new WebSocket('ws://example.com/socket');
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
console.log('WebSocket connection opened');
return () => {
socket.close();
console.log('WebSocket connection closed');
};
}, []);
return (
<div>
<h1>WebSocket Messages</h1>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
</div>
);
};
export default WebSocketComponent;Открытие WebSocket соединения
const socket = new WebSocket('ws://example.com/socket'); Обработка входящих сообщений
socket.onmessage = (event) => {
setMessages((prevMessages) => [...prevMessages, event.data]);
};
Закрытие WebSocket соединения при демонтировании
return () => {
socket.close();
console.log('WebSocket connection closed');
};👉 @frontendInterview
>>Click here to continue<<
Frontend Interview - собеседования по Javascript / Html / Css
