React——组件缓存 react-activation

1、安装依赖

npm i -S react-activation

2、包裹根组件

import { AliveScope } from "react-activation"


	

3、缓存组件

import { KeepAlive } from "react-activation"

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

  return 


     setIsShow(!isShow)}>切换

    {
      isShow &&
      
        
      
    }
    
  
}

4、路由缓存

 (
    
      
    
  )}
/>

5、KeepAlive属性

属性名	类型	备注
when	Boolean、Array、Function	Boolean (true-卸载时缓存 false-卸载时不缓存) Array (第 1 位参数表示是否需要在卸载时缓存 第 2 位参数表示是否卸载  的所有缓存内容，包括  中嵌的 ) 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() 获取所有缓存中的节点