react如何销毁
销毁 React 组件的方法
在 React 中，组件的销毁通常由 React 的生命周期管理自动处理。当组件不再需要时，React 会自动触发卸载（unmount）过程。以下是几种常见的销毁组件的方法：
条件渲染控制组件的销毁
通过条件渲染可以控制组件的显示与隐藏。当条件不满足时，React 会自动卸载组件：
function ParentComponent() {
const [showChild, setShowChild] = useState(true);
return (
<div>
{showChild && <ChildComponent />}
<button onClick={() => setShowChild(false)}>销毁子组件</button>
</div>
);
}使用 key 强制重新渲染组件
通过改变组件的 key 属性，可以强制 React 销毁旧组件并重新创建新组件：
function ParentComponent() {
const [key, setKey] = useState(0);
return (
<div>
<ChildComponent key={key} />
<button onClick={() => setKey(key + 1)}>重新创建子组件</button>
</div>
);
}在类组件中使用 componentWillUnmount
对于类组件，可以在 componentWillUnmount 生命周期方法中执行清理操作：
class ChildComponent extends React.Component {
componentWillUnmount() {
// 执行清理操作
console.log('组件即将被销毁');
}
render() {
return <div>子组件内容</div>;
}
}在函数组件中使用 useEffect 清理副作用
函数组件中可以使用 useEffect 的返回函数来执行清理操作：
function ChildComponent() {
useEffect(() => {
return () => {
// 执行清理操作
console.log('组件即将被销毁');
};
}, []);
return <div>子组件内容</div>;
}手动销毁 React 应用的方法
使用 ReactDOM.unmountComponentAtNode
对于挂载在特定 DOM 节点上的 React 应用，可以使用 ReactDOM.unmountComponentAtNode 方法手动卸载：
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
// 手动卸载应用
ReactDOM.unmountComponentAtNode(rootElement);使用 React 18+ 的 root.unmount
在 React 18 及以上版本中，使用新的 createRoot API 时，可以通过 root.unmount 方法卸载应用：
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
// 手动卸载应用
root.unmount();注意事项
组件销毁时会自动触发清理操作，但需要手动清理以下资源：
- 定时器（setTimeout/setInterval）
- 事件监听器（addEventListener）
- 网络请求的取消（AbortController）
- 第三方库的清理方法
确保在组件销毁前释放所有占用资源，避免内存泄漏。
