react 如何手动卸载组件
时间: 2023-09-07 12:13:13 浏览: 56
手动卸载 React 组件可以通过 `ReactDOM.unmountComponentAtNode()` 方法实现。这个方法接收一个 DOM 元素作为参数,会将这个元素上挂载的 React 组件卸载掉。
代码示例:
```jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [showComponent, setShowComponent] = useState(true);
useEffect(() => {
return () => {
// 在组件卸载时手动卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById("root"));
};
}, []);
return (
<div>
<button onClick={() => setShowComponent(!showComponent)}>
{showComponent ? "卸载组件" : "挂载组件"}
</button>
{showComponent && <MyComponent />}
</div>
);
}
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount((c) => c + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return <div>{count}</div>;
}
ReactDOM.render(<App />, document.getElementById("root"));
```
在上面的代码中,我们在 `useEffect` 的返回函数中调用了 `ReactDOM.unmountComponentAtNode()` 方法,这样在 `App` 组件卸载时就会自动卸载挂载在 `App` 组件内部的 `MyComponent` 组件。同时,我们也提供了一个按钮来手动控制 `MyComponent` 组件的挂载和卸载。