基于ReactRouter实现keepalive

当路由切换的时候，react router 会销毁之前路由的组件，然后渲染新的路由对应的组件。

在一些场景下，这样是有问题的。

比如移动端很多长列表，用户划了很久之后，点击某个列表项跳到详情页，之后又跳回来，但是这时候列表页的组件销毁重新创建，又回到了最上面。

比如移动端填写了某个表单，有的表单需要跳到别的页面获取数据，然后跳回来，跳回来发现组件销毁重新创建，之前填的都没了。

类似这种场景，就需要路由切换的时候不销毁组件，也就是 keepalive。

我们先复现下这个场景：

npx create-vite

进入项目，安装依赖，把开发服务跑起来：

npm install
npm run dev

安装 react-router：

npm i --save react-router-dom

在 App.tsx 写下路由：

import { useState } from "react";
import {
    Link,
    useLocation,
    RouterProvider,
    createBrowserRouter,
    Outlet,
} from "react-router-dom";

const Layout = () => {
    const { pathname } = useLocation();

    return (
        <div>
            <div>当前路由: {pathname}</div>
            <Outlet />
        </div>
    );
};

const Aaa = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <p>
                <button onClick={() => setCount((count) => count + 1)}>
                    加一
                </button>
            </p>
            <Link to="/bbb">去 Bbb 页面</Link>
            <br />
            <Link to="/ccc">去 Ccc 页面</Link>
        </div>
    );
};

const Bbb = () => {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <p>
                <button onClick={() => setCount((count) => count + 1)}>
                    加一
                </button>
            </p>
            <Link to="/">去首页</Link>
        </div>
    );
};

const Ccc = () => {
    return (
        <div>
            <p>ccc</p>
            <Link to="/">去首面</Link>
        </div>
    );
};

const routes = [
    {
        path: "/",
        element: <Layout></Layout>,
        children: [
            {
                path: "/",
                element: <Aaa></Aaa>,
            },
            {
                path: "/bbb",
                element: <Bbb></Bbb>,
            },
            {
                path: "/ccc",
                element: <Ccc></Ccc>,
            },
        ],
    },
];

export const router = createBrowserRouter(routes);

const App = () => {
    return <RouterProvider router={router} />;
};

export default App;

这里有 /、/bbb、/ccc 这三个路由。

一级路由渲染 Layout 组件，里面通过 Outlet 指定渲染二级路由的地方。

二级路由 / 渲染 Aaa 组件，/bbb 渲染 Bbb 组件，/ccc 渲染 Ccc 组件。

这里的 Outlet 组件，也可以换成 useOutlet，效果一样：

注释掉 index.css 还有 StrictMode：

在浏览器看一下：

默认路由切换，对应的组件就会销毁：

我们有时候不希望切换路由时销毁页面组件，也就是希望能实现 keepalive。

怎么做呢？

其实很容易想到，我们把所有需要 keepalive 的组件保存到一个全局对象。

然后渲染的时候把它们都渲染出来，路由切换只是改变显示隐藏。

按照这个思路来写一下：

新建 keepalive.tsx

import React, { createContext, useContext } from "react";
import { useOutlet, useLocation, matchPath } from "react-router-dom";
import type { FC, PropsWithChildren, ReactNode } from "react";

interface KeepAliveLayoutProps extends PropsWithChildren {
    keepPaths: Array<string | RegExp>;
    keepElements?: Record<string, ReactNode>;
    dropByPath?: (path: string) => void;
}

type KeepAliveContextType = Omit<Required<KeepAliveLayoutProps>, "children">;

const keepElements: KeepAliveContextType["keepElements"] = {};

export const KeepAliveContext = createContext<KeepAliveContextType>({
    keepPaths: [],
    keepElements,
    dropByPath(path: string) {
        keepElements[path] = null;
    },
});

const isKeepPath = (keepPaths: Array<string | RegExp>, path: string) => {
    let isKeep = false;
    for (let i = 0; i < keepPaths.length; i++) {
        let item = keepPaths[i];
        if (item === path) {
            isKeep = true;
        }
        if (item instanceof RegExp && item.test(path)) {
            isKeep = true;
        }
        if (typeof item === "string" && item.toLowerCase() === path) {
            isKeep = true;
        }
    }
    return isKeep;
};

export function useKeepOutlet() {
    const location = useLocation();
    const element = useOutlet();

    const { keepElements, keepPaths } = useContext(KeepAliveContext);
    const isKeep = isKeepPath(keepPaths, location.pathname);

    if (isKeep) {
        keepElements![location.pathname] = element;
    }

    return (
        <>
            {Object.entries(keepElements).map(([pathname, element]) => (
                <div
                    key={pathname}
                    style={{
                        height: "100%",
                        width: "100%",
                        position: "relative",
                        overflow: "hidden auto",
                    }}
                    className="keep-alive-page"
                    hidden={!matchPath(location.pathname, pathname)}>
                    {element}
                </div>
            ))}
            {!isKeep && element}
        </>
    );
}

const KeepAliveLayout: FC<KeepAliveLayoutProps> = (props) => {
    const { keepPaths, ...other } = props;

    const { keepElements, dropByPath } = useContext(KeepAliveContext);

    return (
        <KeepAliveContext.Provider
            value={{ keepPaths, keepElements, dropByPath }}
            {...other}
        />
    );
};

export default KeepAliveLayout;