页面切换如何禁止刷新呢？-灵析社区

页面没有刷新，只是每次切换的时候都生成了一个新的实体，没有使用旧的 重新组织一下代码，用hook来是实现 // ChildComponet.js import React from "react"; import { Input } from "antd"; import PropTypes from "prop-types"; function ChildComponent({ show }) { const [value, setValue] = React.useState(""); if (!show) return null; /* 关键点 */ return ( { setValue(e.target.value); }} /> ); } // 用于防止eslint报错 ChildComponent.propTypes = { show: PropTypes.bool.isRequired, }; export default ChildComponent; // ParentComponet.js import React from "react"; import { Radio } from "antd"; import ChildComponent from "./ChildComponent"; function ParentComponent() { const [value, setValue] = React.useState("组件一"); return ( {/* 这两个实体一开始就是都存在的，只是切换的时候，返回的值不同。但是它们的状态都保存在各自实体里了。 */} { setValue(e.target.value); }} > 组件一 组件二 ); } export default ParentComponent; //App.js import "./styles.css"; import ParentComponent from "./ParentComponent"; export default function App() { return ( ); } [codesandbox](https://link.segmentfault.com/?enc=Pk7v9k9OujX1DOVzD5hrWg%3D%3D.EmuRBe8zIyF5XO06ngR8OlGvyQ49%2F3Or1hId3So1pm6p9QjIQqPPnP3%2B75eBCFCrXUVGikwUxuPpDnPlXrrN973FUvv%2BGARDnu5AuKTvSZ%2FCM9uXj5yQVGHuRqiao%2Bkv) 不仅仅是能不能保存状态的问题，而且还有性能问题，每切换一次就生成一个实体。一个组件A中生成一个组件B，一个组件B又能生成一个组件A，这个结构就有问题。  修改：不将Radio.Button拆出来，去掉嵌套调用，状态上移 // ChildComponent.js import React from "react"; import { Input, Radio } from "antd"; import PropTypes from "prop-types"; function ChildComponent({ show, changeTab }) { const [value, setValue] = React.useState(""); if (!show) return null; /* 关键点 */ return ( { setValue(e.target.value); }} /> { changeTab(e.target.value); }} > 组件一 组件二 ); } // 用于防止eslint报错 ChildComponent.propTypes = { show: PropTypes.bool.isRequired, }; export default ChildComponent; // ParentComponent.js import React from "react"; import { Radio } from "antd"; import ChildComponent from "./ChildComponent"; function ParentComponent() { const [value, setValue] = React.useState("组件一"); return ( ); } export default ParentComponent; //App.js import "./styles.css"; import ParentComponent from "./ParentComponent"; export default function App() { return ; }