React——组件缓存 react-activation

1、安装依赖

npm i -S react-activation

2、包裹根组件

import { AliveScope } from "react-activation"

<AliveScope>
	<App />
</AliveScope>

3、缓存组件

import { KeepAlive } from "react-activation"

export default () => {
  const [isShow, setIsShow] = useState(true)

  return <div>

    <button onClick={() => setIsShow(!isShow)}>切换</button>

    {
      isShow &&
      <KeepAlive>
        <Page3 />
      </KeepAlive>
    }
    <Page4 />
  </div>
}

4、路由缓存

<Route
  path="/page1"
  render={props => (
    <KeepAlive name="/page1">
      <Item {...props} />
    </KeepAlive>
  )}
/>

5、KeepAlive属性