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属性

属性名	类型	备注
when	Boolean、Array、Function	Boolean (true-卸载时缓存 false-卸载时不缓存) Array (第 1 位参数表示是否需要在卸载时缓存 第 2 位参数表示是否卸载 <KeepAlive> 的所有缓存内容，包括 <KeepAlive> 中嵌的 <KeepAlive>) Function (返回值为上述 Boolean 或 Array)
saveScrollPosition	Boolean	自动保存滚动位置（默认true）
name	string	缓存标识

6、手动控制缓存

使用 withAliveScope 或 useAliveController 获取控制函数

import KeepAlive, { withAliveScope, useAliveController } from 'react-activation'

//hook 函数式组件
function app(){
    const { drop, dropScope, clear, getCachingNodes } = useAliveController()
}

//class 类组件
@withAliveScope
class App extends Component {
  render() {
    const { drop, dropScope, clear, getCachingNodes } = this.props
  }
}

• drop(name) 卸载缓存，不包括嵌套的KeepAlive
• dropScope(name) 卸载缓存，包括嵌套的所有KeepAlive
• refresh(name) 刷新缓存状态，不包括嵌套的KeepAlive
• refreshScope(name) 刷新缓存状态，包括嵌套的所有KeepAlive
• clear() 清空所有缓存
• getCachingNodes() 获取所有缓存中的节点