react如何销毁
React 组件销毁的机制
在 React 中，组件的销毁通常由 React 的生命周期管理。当组件从 DOM 中移除时，React 会自动触发销毁相关的生命周期方法。以下是关键点：
组件的销毁通常发生在以下情况：
- 父组件重新渲染并决定不再渲染该子组件
- 条件渲染导致组件不再显示
- 路由切换导致组件卸载
使用生命周期方法处理销毁
类组件中可以通过 componentWillUnmount 生命周期方法来执行销毁前的清理工作：
class MyComponent extends React.Component {
componentWillUnmount() {
// 执行清理操作
clearInterval(this.timerID);
this.subscription.unsubscribe();
}
render() {
return <div>Component Content</div>;
}
}函数组件中的销毁处理
函数组件使用 useEffect hook 的清理函数来实现类似功能：
function MyComponent() {
useEffect(() => {
const timerID = setInterval(() => {
// 一些操作
}, 1000);
// 返回清理函数
return () => {
clearInterval(timerID);
};
}, []);
return <div>Component Content</div>;
}手动触发组件销毁
虽然通常不推荐手动销毁组件，但可以通过条件渲染来实现：
function ParentComponent() {
const [showChild, setShowChild] = useState(true);
return (
<div>
<button onClick={() => setShowChild(false)}>
销毁子组件
</button>
{showChild && <ChildComponent />}
</div>
);
}销毁时的注意事项
- 清除所有定时器和事件监听器
- 取消未完成的网络请求
- 释放外部库创建的资源
- 避免在销毁后更新组件状态
- 清理全局状态或缓存中的相关数据
常见需要清理的资源类型
定时器：
useEffect(() => {
const timer = setTimeout(() => {}, 1000);
return () => clearTimeout(timer);
}, []);事件监听：
useEffect(() => {
const handleResize = () => {};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);订阅：
useEffect(() => {
const subscription = observable.subscribe();
return () => subscription.unsubscribe();
}, []);
