react如何销毁组件
React 组件销毁的方法
在 React 中，组件的销毁通常由 React 自身管理，但可以通过以下方式主动触发或处理销毁逻辑：
手动卸载组件
使用 ReactDOM.unmountComponentAtNode() 方法从 DOM 中移除组件。例如卸载挂载在 root 节点上的组件：
import ReactDOM from 'react-dom';
const rootElement = document.getElementById('root');
ReactDOM.unmountComponentAtNode(rootElement);条件渲染控制销毁
通过条件渲染（如 && 或三元表达式）控制组件的存在与否。当条件为 false 时，React 会自动销毁组件：
function ParentComponent() {
const [showChild, setShowChild] = useState(true);
return (
<div>
{showChild && <ChildComponent />}
<button onClick={() => setShowChild(false)}>卸载子组件</button>
</div>
);
}清理副作用
在函数组件中，通过 useEffect 的清理函数处理组件销毁时的逻辑（如取消订阅、清除定时器）：
useEffect(() => {
const timer = setInterval(() => console.log('Running'), 1000);
return () => {
clearInterval(timer); // 组件销毁时执行
};
}, []);类组件的生命周期
类组件中可通过 componentWillUnmount 执行销毁前的清理操作：
class MyComponent extends React.Component {
componentWillUnmount() {
console.log('组件即将销毁');
}
render() {
return <div>类组件示例</div>;
}
}注意事项
- 组件的销毁由 React 的虚拟 DOM 机制自动触发，通常不需要手动干预。
- 清理资源（如事件监听、网络请求）应在销毁阶段处理，避免内存泄漏。
