React集成react-activation，实现页面缓存

安装

yarn add react-activation

demo1

import { KeepAlive, useActivate, AliveScope } from 'react-activation';
function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      count: {count}
      <button onClick={() => setCount((count) => count + 1)}>add</button>
    </div>
  )
}

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

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

demo2
注：umi案例。AliveScope 设置在 layouts/index.tsx下面

const Area  = () =>{
	return <div>区域管理</div>
}
const AreaAlive = memo(
  ({ location: { pathname } }: API.PagesRouteType) => {
    return (
      <KeepAlive
        name={pathname}
        id={pathname}
        saveScrollPosition="screen"
      >
     	 {/*页面组件*/}
        <Area />
      </KeepAlive>
    );
  },
);
export default AreaAlive;

欢迎留言交流