react如何卸载组件
卸载 React 组件的方法
在 React 中卸载组件通常涉及以下操作：
使用 useEffect 钩子清理副作用
在函数组件中，可以通过 useEffect 的返回函数实现卸载时的清理逻辑：
useEffect(() => {
// 组件挂载时的逻辑
return () => {
// 组件卸载时的清理逻辑
};
}, []);类组件中的 componentWillUnmount
对于类组件，生命周期方法 componentWillUnmount 专门用于处理卸载逻辑：
class MyComponent extends React.Component {
componentWillUnmount() {
// 清理定时器、取消网络请求等
}
}条件渲染触发卸载
通过条件控制组件的渲染状态，当条件为 false 时组件会被卸载：
{isVisible && <MyComponent />}手动卸载根组件
对于通过 ReactDOM.render 挂载的根组件，可以调用 ReactDOM.unmountComponentAtNode：
const root = document.getElementById('root');
ReactDOM.unmountComponentAtNode(root);清理事件监听器
在组件卸载时需移除手动添加的事件监听：
useEffect(() => {
const handleClick = () => {};
window.addEventListener('click', handleClick);
return () => window.removeEventListener('click', handleClick);
}, []);取消订阅与异步任务
清除订阅或中止未完成的异步请求：
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal });
return () => controller.abort();
}, []);
