多tab页
问题描述:
遇到切换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([]);
}
}