github地址：https://github.com/azoth1991/componentCache
stateCache說明
1颜懊、用途
- 在組件更新完成，或者刪除的時(shí)候緩存state
- 再次調(diào)用組件的時(shí)候黄虱，先從緩存中拿到state旷坦，再用接口返回的state覆蓋緩存的state，從而減少白屏?xí)r間
使用方法
@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 最大緩存條數(shù)
- storageType 緩存類型叨粘，目前支持localStorage和sessionStorage
- lifecycle 緩存的生命周期,目前支持conponentDidUpdate和componentWillUpdate
代碼分析
- 使用技術(shù)
- 高階組件
- localstorage/sessionstorage
- 實(shí)現(xiàn)方法:
1、接收config和默認(rèn)的config合并
2瘤睹、在WrapComp組件中的componentWillMount生命周期升敲，獲取緩存中的state,并調(diào)用原組件的componentWillmount,此時(shí)如果有數(shù)據(jù)在render之前就可以拿到有數(shù)據(jù)的state并渲染。
3轰传、在WrapComp組件的componentDidUpdate和componentWillUnmount生命周期中進(jìn)行根據(jù)config配置來緩存數(shù)據(jù)
4驴党、返回WrapComp組件，如果沒有配置key則返回原組件
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
