react如何清除页面
清除 React 页面的方法
卸载组件
通过条件渲染移除组件。使用状态控制组件的显示与隐藏，将状态设置为 false 时，组件会从 DOM 中卸载。
const [showComponent, setShowComponent] = useState(true);
return (
<div>
{showComponent && <MyComponent />}
<button onClick={() => setShowComponent(false)}>清除组件</button>
</div>
);重置组件状态
通过传递新的 key 属性强制重新渲染组件。当 key 变化时，React 会销毁旧组件实例并创建新实例。
const [key, setKey] = useState(0);
const resetComponent = () => setKey(prevKey => prevKey + 1);
return <MyComponent key={key} />;清空数据或状态
在父组件中重置传递给子组件的状态或数据。例如将数组、对象等重置为初始值。
const [data, setData] = useState([1, 2, 3]);
const clearData = () => setData([]);
return <ChildComponent data={data} onClear={clearData} />;使用 Effect 清理副作用
在组件卸载时清理定时器、事件监听等资源。通过 useEffect 的返回函数实现。
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => clearInterval(timer); // 清理定时器
}, []);路由切换时的清理
通过 React Router 切换路由时，前一个路由的组件会自动卸载。结合路由参数变化可触发组件重新加载。
<Route path="/page/:id" component={Page} />
// 跳转新路由时，旧页面组件会被卸载
