react如何卸载组件
卸载组件的方法
在React中卸载组件通常通过条件渲染或手动调用API实现，以下是几种常见方式：
条件渲染卸载
通过状态控制组件的挂载与卸载，当条件不满足时组件会被React自动卸载：
function ParentComponent() {
const [isMounted, setIsMounted] = useState(true);
return (
<div>
{isMounted && <ChildComponent />}
<button onClick={() => setIsMounted(false)}>卸载组件</button>
</div>
);
}类组件中使用卸载方法
对于类组件，可以调用ReactDOM.unmountComponentAtNode()方法手动卸载：
import ReactDOM from 'react-dom';
class MyComponent extends React.Component {
handleUnmount = () => {
const node = document.getElementById('container');
ReactDOM.unmountComponentAtNode(node);
};
render() {
return <button onClick={this.handleUnmount}>卸载自己</button>;
}
}使用Portal卸载
通过React Portal结合状态控制，可以精确卸载特定位置的组件：
function PortalComponent() {
const [show, setShow] = useState(true);
const container = document.getElementById('portal-root');
return (
<>
{show && ReactDOM.createPortal(
<Modal />,
container
)}
<button onClick={() => setShow(false)}>关闭模态框</button>
</>
);
}useEffect清理副作用
卸载时会触发useEffect的清理函数，适合执行资源释放操作：
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => {
clearInterval(timer); // 组件卸载时执行
};
}, []);注意事项
- 手动卸载通常只适用于特殊场景，多数情况下应优先使用条件渲染
- 确保卸载后不再尝试更新组件状态，避免内存泄漏
- 卸载后关联的DOM节点会被React自动从文档中移除
