快捷導(dǎo)航

React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的示例代碼

更新時(shí)間：2024年01月23日 09:45:58 作者：崽崽的谷雨

因?yàn)?react、vue都是單頁(yè)面應(yīng)用,路由跳轉(zhuǎn)時(shí),就會(huì)銷(xiāo)毀上一個(gè)頁(yè)面的組件,但是有些項(xiàng)目不想被銷(xiāo)毀,想保存狀態(tài),本文給大家介紹了React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的代碼示例,需要的朋友可以參考下

前言：

因?yàn)?react、vue都是單頁(yè)面應(yīng)用，路由跳轉(zhuǎn)時(shí)，就會(huì)銷(xiāo)毀上一個(gè)頁(yè)面的組件。但是有些項(xiàng)目不想被銷(xiāo)毀，想保存狀態(tài)。

比如：h5項(xiàng)目跳轉(zhuǎn)其他頁(yè)面返回時(shí)，頁(yè)面狀態(tài)不丟失。設(shè)想一個(gè) 頁(yè)面我滑倒了中間，然后跳轉(zhuǎn)到詳情頁(yè)然后返回，之前的頁(yè)面刷新了，回到頂部了肯定不行（搜索條件之類(lèi)的消失了，滾動(dòng)條回到頂部了）！

比如：pc端項(xiàng)目后臺(tái)管理項(xiàng)目里點(diǎn)擊時(shí) 打開(kāi)一個(gè)頁(yè)簽，頁(yè)簽切換，狀態(tài)頁(yè)會(huì)丟失。每次切換頁(yè)簽都重新請(qǐng)求了接口。

解決方案：

方案調(diào)研：

經(jīng)過(guò)我的調(diào)研：

我找到的第三放庫(kù)有：

react-activation

umi-plugin-keep-alive

umi-plugin-keep-alive-tabs

react-keepalive-router

react-router-cache-route

redux、dva等(狀態(tài)共享插件)

react-keepalive-router、react-router-cache-route:

react-keepalive-router、react-router-cache-route 是個(gè)人開(kāi)發(fā)的，github上issues里的建議也沒(méi)及時(shí)回答。所以我就放棄了，沒(méi)考慮。

Offscreen:

Offscreen是react 18.x出的實(shí)驗(yàn)性api,所以我也放棄了。可以看react Offscreen
不過(guò) 此api如果正式使用的話，應(yīng)該是最好的選擇。其原理就是把頁(yè)面隱藏起來(lái)，不銷(xiāo)毀組件樹(shù)。其實(shí)其他插件原理也是這樣。

在這里插入圖片描述

umi-plugin-keep-alive、umi-plugin-keep-alive-tabs:

umi-plugin-keep-alive、umi-plugin-keep-alive-tabs 是umi里的，是阿里開(kāi)發(fā)的，優(yōu)先考慮的就是這個(gè)，但看了文檔發(fā)現(xiàn) 它基于 react-activation。而且作者也讓關(guān)注。

npm umi-plugin-keep-alive

umi-plugin-keep-alive api

其實(shí) 如果你項(xiàng)目是 umi的話用 umi-plugin-keep-alive也可以（低版本umi可能不行）。antd-pro
若依等等基于umi搭建的庫(kù)都可以使用umi-plugin-keep-alive。這個(gè)插件和umi綁定，所以我也放棄了，但應(yīng)該也可以單獨(dú)使用（我沒(méi)試過(guò)）。

redux等狀態(tài)共享插件，需要項(xiàng)目搭建時(shí)就使用,原理就是，頁(yè)面里不寫(xiě) useState和state全都放到 store里。然后對(duì)整個(gè)store緩存。每次進(jìn)入頁(yè)面判斷一下有緩存就走緩存，沒(méi)有重新請(qǐng)求。像redux之類(lèi)的都有持久化插件，配合持久化插件就很容易實(shí)現(xiàn)。缺點(diǎn)是繁瑣，且破壞了不優(yōu)雅，頁(yè)面里不能寫(xiě)狀態(tài)。而且還要額外記錄滾動(dòng)條的位置。

react-activation:

所以綜上我選擇了 react-activation 它是路由級(jí)別的緩存。

在這里插入圖片描述

react-activation基礎(chǔ)使用步驟及配置：

React Activation 僅支持 React 16 及以上版本

注意：

1.請(qǐng)勿使用 <React.StrictMode />

2.（React v18+）不要使用 ReactDOMClient.createRoot ，使用 ReactDOM.render 代替， https://github.com/CJY0208/react-activation/issues/225#issuecomment-1311136388

在這里插入圖片描述

1.安裝 react-activation

yarn add react-activation
# or
npm install react-activation

（可選，推薦）在 .babelrc 中添加 react-activation/babel 插件
該插件在編譯過(guò)程中為每個(gè)JSX元素添加了一個(gè) _nk 屬性，以幫助 react-activation 運(yùn)行時(shí)根據(jù) react-node-key 的渲染位置生成唯一的標(biāo)識(shí)符。

{
  "plugins": [
    "react-activation/babel"
  ]
}

如果不想使用Babel，建議每個(gè) 聲明一個(gè)全局唯一不變的 cacheKey 屬性，以保證該高速緩存的穩(wěn)定性，如下所示：

<KeepAlive cacheKey="UNIQUE_ID" />

2.import KeepAlive 然后包裹要緩存的組件或者元素。

官網(wǎng)示例：

// App.js

import React, { useState } from 'react'
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>
  )
}

function App() {
  const [show, setShow] = useState(true)

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

export default App

3.將外層放置在不會(huì)卸載的位置，通常在應(yīng)用入口處

配合路由使用react-activation

1.isCache是自定義的屬性，用來(lái)標(biāo)識(shí)是否緩存。true就是改路由需要緩存。

  {
    path: "/",
    component: <Initial />,
    title: "主頁(yè)",
    name: "initPage",
    isCache: true,
    cacheKey: "home",
  }

App.js 入口文件或者路由配置頁(yè)面里封裝一層根據(jù) isCache值來(lái)確定是否使用 keepAlive包裹。如下：

import React from "react";
import { BrowserRouter, Routes, Route, HashRouter } from "react-router-dom";
import routes from "./routes.js";
import KeepAlive from "react-activation";
// 封裝一層 專(zhuān)門(mén)負(fù)責(zé)顯示頁(yè)面標(biāo)題
const DomTitle = ({ route }) => {
  const { title, component, isCache ,cacheKey,name} = route;
  document.title = title;
  if (isCache) {
    return <KeepAlive cacheKey={cacheKey} name={name}>{component}</KeepAlive>;
  }
  return <>{component}</>;
};
const App = () => {
  return (
    <HashRouter>
      <Routes>
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            //element={route.component   }
            // 專(zhuān)門(mén)負(fù)責(zé)顯示頁(yè)面標(biāo)題
            element={<DomTitle route={route} />}
          />
        ))}
      </Routes>
    </HashRouter>
  );
};

還可以手動(dòng)清除緩存

import {
  useActivate,
  useUnactivate,
  withActivation,
  withAliveScope,
  useAliveController,
} from "react-activation";
 const { drop, dropScope, clear, getCachingNodes } = useAliveController();
   console.log(getCachingNodes(), "緩存節(jié)點(diǎn)");
    //drop("homePage"); // 手動(dòng)關(guān)閉某個(gè)頁(yè)面
    // dropScope("detailPage");
    dropScope("homePage");  // 參數(shù)就是上面定義的  cacheKey

還需要將外層放置在不會(huì)卸載的位置，通常在應(yīng)用入口處我的項(xiàng)目時(shí)create-react-app 是index.js。

index.js