stateCache组件

github地址:https://github.com/azoth1991/componentCache

stateCache说明

1、用途

  • 在组件更新完成,或者删除的时候缓存state
  • 再次调用组件的时候,先从缓存中拿到state,再用接口返回的state覆盖缓存的state,从而减少白屏时间
    使用方法
@stateCache({
  key: 'investDetail',
  hashQueryName: 'balanceId',
  maxNum: 3,
  storageType: 'localStorage',
  lifecycle: ['componentDidUpdate', 'componentWillUnmount'],
})
class FundChannel extends FundPage {
  constructor...
}
  • key 为stateCache缓存的key值
  • hashQueryName 表示query中用于缓存的字段名:'productId'、'balanceId'等
  • maxNum 最大缓存条数
  • storageType 缓存类型,目前支持localStorage和sessionStorage
  • lifecycle 缓存的生命周期,目前支持conponentDidUpdate和componentWillUpdate

代码分析

  • 使用技术
  • 高阶组件
  • localstorage/sessionstorage
  • 实现方法:
    1、接收config和默认的config合并
    2、在WrapComp组件中的componentWillMount生命周期,获取缓存中的state,并调用原组件的componentWillmount,此时如果有数据在render之前就可以拿到有数据的state并渲染。
    3、在WrapComp组件的componentDidUpdate和componentWillUnmount生命周期中进行根据config配置来缓存数据
    4、返回WrapComp组件,如果没有配置key则返回原组件

推荐阅读更多精彩内容