react如何销毁
销毁 React 组件的方法
在 React 中，销毁组件通常涉及卸载组件并从内存中清除相关资源。以下是几种常见方法：
手动卸载组件
通过条件渲染控制组件的挂载与卸载。当条件不满足时，React 会自动触发组件的卸载生命周期。
function ParentComponent() {
const [showChild, setShowChild] = useState(true);
return (
<div>
{showChild && <ChildComponent />}
<button onClick={() => setShowChild(false)}>销毁子组件</button>
</div>
);
}清理副作用
若组件包含副作用（如订阅、定时器），需在 useEffect 的清理函数中释放资源，避免内存泄漏。
function ChildComponent() {
useEffect(() => {
const timer = setInterval(() => {
console.log('定时器运行中');
}, 1000);
return () => {
clearInterval(timer); // 组件卸载时清理定时器
};
}, []);
return <div>子组件内容</div>;
}类组件生命周期
对于类组件，可通过 componentWillUnmount 执行清理操作。
class ChildComponent extends React.Component {
componentDidMount() {
this.timer = setInterval(() => {
console.log('定时器运行中');
}, 1000);
}
componentWillUnmount() {
clearInterval(this.timer); // 组件卸载时清理
}
render() {
return <div>子组件内容</div>;
}
}强制移除 DOM 节点
极端情况下，可直接操作 DOM 移除组件对应的节点（不推荐，应优先使用 React 自身机制）。
const node = document.getElementById('root');
ReactDOM.unmountComponentAtNode(node); // 强制卸载根组件关键注意事项
- 避免直接操作 DOM，优先使用 React 的状态控制机制。
- 确保清理所有副作用（如事件监听、网络请求取消等）。
- 函数组件依赖
useEffect的清理函数，类组件依赖componentWillUnmount。
