react函数组件如何销毁组件
在 React 函数组件中销毁组件
React 函数组件的销毁通常由 React 的声明式渲染机制自动处理。当组件从 DOM 中移除时，React 会自动清理其资源。以下是关键点：
触发组件销毁的条件
- 父组件不再渲染该子组件（例如条件渲染中条件不满足）。
- 使用
ReactDOM.unmountComponentAtNode()强制卸载某个节点下的组件。 - 路由切换时，旧路由对应的组件会被卸载。
手动清理副作用
虽然不能直接"销毁"组件，但可以通过以下方式确保组件卸载时资源被正确释放：
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
// 组件挂载时执行的代码
return () => {
// 这里返回的清理函数会在组件卸载时执行
console.log('组件即将卸载，清理工作在这里进行');
// 清除定时器、取消订阅等
};
}, []);
return <div>组件内容</div>;
}强制卸载组件的方法
在父组件中可以通过条件渲染控制子组件的存在：
function ParentComponent() {
const [showChild, setShowChild] = React.useState(true);
return (
<div>
<button onClick={() => setShowChild(false)}>
卸载子组件
</button>
{showChild && <ChildComponent />}
</div>
);
}使用 key 强制重新创建组件
通过改变组件的 key 属性可以强制 React 销毁旧组件实例并创建新实例：
function ParentComponent() {
const [key, setKey] = React.useState(0);
return (
<div>
<button onClick={() => setKey(prev => prev + 1)}>
重新创建组件
</button>
<ChildComponent key={key} />
</div>
);
}注意事项
- 类组件有明确的
componentWillUnmount生命周期方法，函数组件则使用 useEffect 的清理函数。 - 确保清除所有副作用（定时器、事件监听器、订阅等）以避免内存泄漏。
- React 的虚拟 DOM 机制会自动处理大多数销毁场景，开发者通常不需要直接操作组件销毁。
