React实现类似于Vue的keep-alive的功能

可以去这个网址看一下相关知识点，个人觉得是写的很好：blog.csdn.net/weixin_4405…

用的第三方库react-activation实现的缓存

1. 首先用AliveScope包裹整个项目

    import { createRoot } from "react-dom/client";
    import { Provider } from "react-redux";
    import store from "@/redux/index";
    import "@/styles/global.scss";
    import App from "./App";
    // import "@/assets/js/flexible.js";
    import { AliveScope } from "react-activation";

    createRoot(document.getElementById("root")!).render(
            <Provider store={store}>
                    <AliveScope>
                        <App />
                    </AliveScope>
            </Provider>
    );

2. 其次用KeepAlive包裹想要缓存的页面路由,看了很多文章说为了不影响其他页面的缓存，KeepAlive必须有个唯一的id,我这里给了唯一的key,之前用了id，好像会出现首次进入页面的时候会出现数据显示不出来的情况

...routerArray.map((route: any) => ({
		...route,
		children: route?.children?.map((item: any) => {		
			return !item.meta.keepAlive
				? { ...item }
				: {
						...item,
						element: (
							<KeepAlive name={item.path} key={item.path} autoFreeze={false}>
								{item.element}
							</KeepAlive>
						),
				  };
		})
	,
		element: (
			<KeepAlive name={route.path} key={route.path} autoFreeze={false}>
				{route.element}
			</KeepAlive>
		),
	})),

3. 配置文件vite.config.ts里面加如下图，这是为了保证每个KeepAlive的唯一性

遇到的问题
1.antd中的下拉框、图片、弹窗等在切换时会出现闪烁或者回弹等问题，解决办法就是在KeepAlive加上autoFreeze={false}，就可以解决，但是说是会影响缓存性能，目前没发现有什么影响