react的KeepAlive插件使用

总所周知vue自带KeepAlive功能，但是像我的博客是react写的，想要在点入详情的保存列表的滚动状态，目前来说只能自己做或者使用插件。

初始想法

使用window.scrollTo()这个方法，在列表页面卸载时记住滚动条的位置，放到redux中，列表页面装载之后读取位置进行滚动。这种使用方法有点弊端，滚动的时候很明显，就显得很呆。

选择插件

找到了react-router-cache-route这个插件，这个插件中给了一个阉割版，只有KeepAlive功能的小插件叫react-activation。所以最终选择的是react-activation来完成我的缓存功能

入口文件index.js

import React from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from "react-router-dom";

import { Provider } from 'react-redux';
import store from '@/store';
import App from '@/components/pages/index';

// 放在router和redux内
import { AliveScope } from 'react-activation'


const root = createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
      <BrowserRouter>
        <AliveScope>
          <App />
        </AliveScope>
      </BrowserRouter>
    </Provider>
);

列表文件 list.jsx中

import KeepAlive from "react-activation";
export default function List() {
return (
    <div>
      <KeepAlive when={true} id={type} saveScrollPosition="screen">
        ....
      </KeepAlive>
    </div>
}

when是自动缓存的配置，true的时候就是在卸载时候自动缓存
像我的列表路由是"/item/:id"这种的，带有分类，这个时候就要加上id这个参数，参数可以是:id，如果不加会导致突发性的白屏问题
saveScrollPosition是保存滚动位置的参数

其他参数可以到官网查看～

这样基本的缓存就做好了，但是列表分页还没有保存，我选择的是使用redux，在卸载时保存到全局，返回时候再拿出请求。

最后的实现效果就是我的博客文章列表这样子啦，点击查看～