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