一般情況下,我們?cè)?code>componentDidMount方法里面執(zhí)行請(qǐng)求數(shù)據(jù).根據(jù)字面意思:頁(yè)面組件加載完畢,然后請(qǐng)求數(shù)據(jù). 對(duì)的 ,沒(méi)毛病!!!
然而問(wèn)題就出現(xiàn),當(dāng)我們跳轉(zhuǎn)到新頁(yè)面時(shí),到界面請(qǐng)求完數(shù)據(jù),更新?tīng)顟B(tài)機(jī).中間會(huì)出現(xiàn)一個(gè)界面卡頓的現(xiàn)象.我的理解是叽讳，頁(yè)面組件還未加載完就已經(jīng)開(kāi)始請(qǐng)求數(shù)據(jù)了新娜，這應(yīng)該是RN的一個(gè)bug吧雾狈，純屬我瞎猜！
解決辦法
await InteractionManager.runAfterInteractions();
在componentDidMount()方法中加上InteractionManager.runAfterInteractions();
InteractionManager:從名稱上可以看出钝域，這是一個(gè)管理互動(dòng)操作的工具亭饵。其中有一個(gè)方法runAfterInteraction（func）咐扭。這個(gè)方法用來(lái)標(biāo)記參數(shù)中傳入的方法在所有當(dāng)前進(jìn)行的交互和動(dòng)畫(huà)完成后再執(zhí)行华弓∈沉悖可以理解為將func加入到一個(gè)等待隊(duì)列。
我們可以使用這個(gè)方法來(lái)避免在Component進(jìn)入畫(huà)面的動(dòng)畫(huà)完成前打斷動(dòng)畫(huà)的問(wèn)題该抒。類似于這樣：
async componentDidMount(){
//當(dāng)前進(jìn)行的交互和動(dòng)畫(huà)完成后再執(zhí)行,執(zhí)行下面的其他方法
await InteractionManager.runAfterInteractions();
await this.freshData();
this.setState({
ready: true,
});
}
請(qǐng)求數(shù)據(jù)freshData
freshData= async ()=>{
//下拉刷新時(shí),重置為1
this.start=1;
const json = await this.fetchData();
this.setState({
movies: json.data.data.products,
});
}
參考:http://blog.csdn.net/angelseedex/article/details/53339107
