react页面保存状态

最新推荐文章于 2024-10-30 09:00:00 发布

_必应

最新推荐文章于 2024-10-30 09:00:00 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/jbguo/article/details/127849209

react 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在React应用中使用react-activation库来实现页面间的状态保持，并探讨了KeepAlive组件在优化页面加载性能和组件复用中的作用。通过实例展示了如何在`Welcome`组件中结合`useState`和`KeepAlive`进行状态管理和页面缓存。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

采用:react-activation


import KeepAlive from 'react-activation';
function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>count: {count}</p>
      <button onClick={() => setCount((count) => count + 1)}>Add</button>
    </div>
  );
}

const Welcome: React.FC = () => {
  const intl = useIntl();
  const [show, setShow] = useState(true);

  return (
        <div>
          <button onClick={() => setShow((show) => !show)}>Toggle</button>
          <div>有KeepAlive</div>
          {show && (
            <KeepAlive>
              <Counter />
            </KeepAlive>
          )}
          <div>无KeepAlive</div>
          {show && <Counter />}
        </div>
  );
};

export default Welcome;

入口app.tsx: childrenRender中使用

childrenRender: (children, props) => {
      // if (initialState?.loading) return <PageLoading />;
      return (
        <AliveScope>
          {children}
          {!props.location?.pathname?.includes('/login') && (
            <SettingDrawer
              disableUrlParams
              enableDarkTheme
              settings={initialState?.settings}
              onSettingChange={(settings) => {
                setInitialState((preInitialState) => ({
                  ...preInitialState,
                  settings,
                }));
              }}
            />
          )}
        </AliveScope>
      );
    },

我的调研:
React 页面间保存恢复状态的几种方法总结
 umi使用umi-plugin-keep-alive实现页面缓存功能