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则返回原组件