开源一个react路由缓存库

置顶 Vgbire

于 2024-07-30 14:26:43 发布

阅读量760

点赞数 23

文章标签：开源 react.js 缓存 keep-alive 路由缓存

本文链接：https://blog.csdn.net/RkHker/article/details/140795961

版权

Github & Demo

Github仓库

CodeSandbox Demo

背景

产品希望可以像浏览器那样每打开一个路由，会多一个tab，用户可以切换tab访问之前加载过的页面，且不会重新加载。
真就产品一句话……

Github上有轮子了吗

Github上开箱即用的轮子是基于react-router-dom V5实现的，我看了一下issue作者表示不会支持V6版本。但是我的项目路由是V6版本的。
后来在Github上找到了另外一个项目是基于V6实现的，但是这是一个类似Demo的项目，没有提供API开箱即用的功能。

功能点

实现一个React版的keep-alive组件，被他包裹的组件会被缓存，下次再打开不需要重新走create生命周期
Tab组件
- 切换路由时新增一个tab，title从路由信息里面自动读取
- tab支持关闭，下次再进入相同的路由会重新加载
- 同时支持关闭所有tab（快捷操作，但是会保留当前tab）
实现activated、deactivated生命周期函数。
- 在Vue2（不知道Vue3是不是）的时候activated的生命周期在首次加载时不会触发，因为它不是从未激活切换到激活的状态。这会导致create 和 activated经常要写相同的代码。
- 我实现的activated则会在首次被激活时也会被调用，不知道算不算优化！
开箱即用的功能，不需要太多额外的配置。

安装

// npm
npm i react-route-cache -S
// pnpm
pnpm i react-route-cache -S
// yarn
yarn add react-route-cache

使用

给Layout组件的outlet加上keep-alive

// Layout.tsx
import { KeepAlive, KeepAliveScope, RouterTabs } from 'react-route-cache';
import { useOutlet } from 'react-router-dom';

const Layout = () => {
  // 需要使用useOutlet
  const outlet = useOutlet();

  return (
    <KeepAliveScope>
      <RouterTabs />
      <KeepAlive>{outlet}</KeepAlive>
    </KeepAliveScope>
  );
};

export default Layout;

路由定义需要增加name属性

// router.ts
// 也可以是createHashRouter
import Layout form './Layout'

createBrowserRouter([
    {
        path: "/",
        element: <Layout />,
        loader: rootLoader
        children: [
            {
                path: "events",
                element: <Event />,
                // 增加name属性，否则标签没有title，展示出现问题
                handle: { name: "事件" },
            }
         ]
      }
]);

生命周期函数
- useActivated返回的方法会在Deactivated的时候执行。
- 第二个可选参数是一个依赖项数组，为了更新回调函数里的依赖，一般不会用到，功能类似useCallback，依赖变化不会执行函数。

import { useActivated, useDeactivated } from 'react-route-cache';

export const Demo = () => {
  useActivated(() => {
    console.log('激活')
    return () => {
        console.log('activated返回的方法会在Deactivated的时候执行')
    }
  });

  useDeactivated(() => {
    console.log('离开组件')
  });

  return <div>123</div>;
};

其他API

mode
- 默认匹配路由path，path变化则会新增一个tab，也就是如果查询参数变化不会新增一个tab缓存组件
- 如果希望查询参数变化也会新增一个tab需要将mode改为search
nameKey：如果路由name已被占用，可以通过该字段获取handle下其他字段的信息作为tab的title

interface KeepAliveScopeProps {
  mode?: 'path' | 'search';
  nameKey?: string;
}
<KeepAliveScope mode="search" nameKey="tabName" />

close、closeAll、closeNavigator
- close方法用于关闭当前标签页
- closeAll用于关闭除了当前激活的tab所有的标签页
- closeNavigator是为了解决比如表单创建页，创建完之后需要跳转到其他路由。closeNavigator会关闭当前创建页标签，然后跳转到指定路由。是close()和navigator(url)的语法糖。

import { useKeepAlive } from '../hooks/use-keep-alive';
...
  const { close, closeAll, closeNavigator } = useKeepAlive();
  close()
  closeAll()
  // 是close()和navigator方法跳转到其他路由
  closeNavigator(url)
...