umi4 は KeepAlive プラグインを使用してページ キャッシュを実装します

シナリオ: ページには多くのインタラクティブな機能がなく、単なる静的データの表示であるため、ページがキャッシュされ、このページに戻るときにリクエストが頻繁に送信されないことが期待されます。

方法：

1. umi-plugin-keep-alive プラグインと React-activation プラグインをインストールします (ここでは pnpm add を使用しますが、npm install を使用することもできます)。

pnpm add umi-plugin-keep-alive --save；

pnpm add react-activation；

2. .umirc.ts ファイルでプラグインを手動で構成し、有効にする必要があります。

plugins: ['umi-plugin-keep-alive'],

注: このプラグイン名は上記のように記述された場合にのみ有効になります。最初はプラグイン名が間違って「@umijs/max-plugin-keep-alive」と記述されており、使用できません。

3. 問題が発生しました: ただし、useModel を使用するページで KeepAlive を使用している限り、エラーが報告されます: Uncaught TypeError: Cannot read property of null (reading 'dispatcher') (そうするページではエラーは報告されません) useModel は使用しません)。その後、gitHub で設定を追加する必要があることがわかりました。

次の設定を src/app.ts に追加します。

import { autoFixContext } from 'react-activation';
import jsxDevRuntime from 'react/jsx-dev-runtime';
import jsxRuntime from 'react/jsx-runtime';

autoFixContext(
  [jsxRuntime, 'jsx', 'jsxs', 'jsxDEV'],
  [jsxDevRuntime, 'jsx', 'jsxs', 'jsxDEV'],
);

4. 次に、それをコンポーネントで使用すると、エラーは報告されません。

import { KeepAlive } from '@umijs/max';
export default () => {
  return (
    <>
      <KeepAlive
        name="home"
        when={() => {
          /*根据路由的前进和后退状态去判断页面是否需要缓存，前进时缓存，后退时不缓存（卸载）。 when中的代码是在页面离开（卸载）时触发的。*/
          return history.action !== 'POP';
        }}
      >
        <Home />
      </KeepAlive>
    </>
  );
};

以上で、umi4 で KeepAlive コンポーネントを使用するための設定が完了しました。不備やご質問がございましたら、お気軽にご連絡ください~