react 页面缓存

React页面缓存可以通过使用`react-keep-alive`库来实现。该库提供了一个`KeepAlive`组件，可以将需要缓存的组件包裹在其中，从而实现缓存的效果。

以下是一个使用`react-keep-alive`实现页面缓存的例子：

首先，安装`react-keep-alive`库：

npm install react-keep-alive --save

然后，在需要缓存的组件外层包裹`KeepAlive`组件：

import React from 'react';
import { KeepAlive } from 'react-keep-alive';

function CachedComponent() {
  return (
    <div>
      {/* 这里是需要缓存的组件 */}
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>My App</h1>
      <KeepAlive>
        <CachedComponent />
      </KeepAlive>
    </div>
  );
}

export default App;

这样，`CachedComponent`组件就会被缓存起来，当组件被卸载时，其状态和数据都会被保留下来，下次再次渲染时可以直接使用缓存的数据。

如果需要手动清除缓存，可以使用`useCacheContext` hook提供的`clear`方法：

import React from 'react';
import { useCacheContext } from 'react-keep-alive';

function ClearButton() {
  const { clear } = useCacheContext();

  function handleClick() {
    clear('CachedComponent');
  }

  return (
    <button onClick={handleClick}>Clear Cache</button>
  );
}

export default ClearButton;

这里的`clear`方法接受一个组件名称作为参数，可以清除该组件的缓存数据。