多tab页缓存(移动端)

588 阅读1分钟

多tab页

截屏2021-08-01 上午10.08.25.png

问题描述:

遇到切换tab的时候页面迟迟不出来,查找原因是调用接口的时候,接口比较慢,这样需要做优化,优化结果为第一次切换tab调用接口,第一次会比较慢,将接口数据缓存起来,下次切换同样的tab,使用缓存数据直接展示。

方法一

第一次调用比较慢的tab数据时,将接口数据缓存在window中,下次切换直接使用。

  • 在切换tab组件的最外层父组件
 const set = require('lodash/set');
 set(window,'tabStyleBArr',[]);
  • 在接口调用慢的tab组件中
const get = require('lodash/get');
const set = require('lodash/set');
public componentDidMount (){
    const tabDatasArr = get(window,'tabStyleBArr');
    const tabDataObj = Array.isArray(tabDataArr) ? tabDatasArr.find(item=>!!item.cardId) : {};
    let productList = tabDataObj && tabDataObj[cardId] ? tabDataObj[cardId] : [];
    if(tabDataObj && productList.length>0){
       //如果在缓存数据中找到对应的数据,则使用缓存数据 this.setState({isLoading:false,productList})
    }else{
    //没有找到缓存数据则调用接口获取数据
        this.handleProductList();
    }
}

//调用接口数据
public handleProductList = ()=>{
    const {cardId = ''} = this.props;
    let productList = ... ;
    //第一次调用接口,拿到的应该是初始化的空数组[]
    const tabDataArr = get(windlow,'tabStyleBArr');
    Array.isArray(tabDataArr) && tabDataArr.push({[cardId] : productList});
    set(window,'tabStyleBArr',tabDataArr);
}

方法二

如果已经将调用接口数据封装成了方法getDataFn(),而该方法在不同组件都有调用,(适用页面多个多tab页);则使用单例,将数据存起来。

let NewsCacheData = [];

const getNewsDataFn = async()=>{
    //已经调用过接口,且拿到数据则直接使用缓存数据
    if(NewsCacheData.length > 0){
        return NewsCacheData;
    }
    
    try{
        ...
        //将调用完成的数据缓存在变量中
        NewsCacheData = renderData
        Promise.resolve(NewsCacheData)
    }catch(e){
        console.log(e.message);
        Promise.resolve([]);
    }
}