react函数组件如何销毁事件
在 React 函数组件中销毁事件
React 函数组件中需要手动销毁事件监听或定时器，以避免内存泄漏和性能问题。以下是几种常见情况的处理方法：
使用 useEffect 清理副作用
在函数组件中，useEffect 钩子可以返回一个清理函数，用于在组件卸载或依赖项变化时执行清理操作。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
const handleResize = () => {
console.log('Window resized');
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return <div>Resize the window and check console</div>;
}清理定时器
定时器（如 setTimeout 或 setInterval）也需要在组件卸载时清理。
import React, { useEffect } from 'react';
function TimerComponent() {
useEffect(() => {
const timer = setInterval(() => {
console.log('Timer tick');
}, 1000);
return () => {
clearInterval(timer);
};
}, []);
return <div>Timer is running, check console</div>;
}清理自定义事件
如果组件订阅了自定义事件或第三方库的事件，同样需要在 useEffect 中清理。
import React, { useEffect } from 'react';
function CustomEventComponent() {
useEffect(() => {
const eventHandler = (data) => {
console.log('Custom event received:', data);
};
someLibrary.on('customEvent', eventHandler);
return () => {
someLibrary.off('customEvent', eventHandler);
};
}, []);
return <div>Listening to custom events</div>;
}清理异步操作
如果组件中有未完成的异步操作（如 API 请求），可以使用 AbortController 取消请求。
import React, { useEffect } from 'react';
function FetchDataComponent() {
useEffect(() => {
const abortController = new AbortController();
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data', {
signal: abortController.signal,
});
const data = await response.json();
console.log(data);
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.error('Fetch error:', error);
}
}
};
fetchData();
return () => {
abortController.abort();
};
}, []);
return <div>Fetching data...</div>;
}清理多个副作用
如果组件中有多个需要清理的副作用，可以在同一个 useEffect 中处理，或者使用多个 useEffect 钩子。
import React, { useEffect } from 'react';
function MultipleEffectsComponent() {
useEffect(() => {
const handleClick = () => {
console.log('Document clicked');
};
document.addEventListener('click', handleClick);
const timer = setInterval(() => {
console.log('Interval tick');
}, 1000);
return () => {
document.removeEventListener('click', handleClick);
clearInterval(timer);
};
}, []);
return <div>Multiple effects running</div>;
}通过以上方法，可以确保 React 函数组件在卸载或重新渲染时正确销毁事件监听器、定时器和其他副作用，避免内存泄漏和不必要的性能开销。
