一般情況下,我們?cè)赾omponentDidMount方法里面執(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:從名稱(chēng)上可以看出，這是一個(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)題。類(lèi)似于這樣：

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,

});

}

總結(jié)

以上是生活随笔為你收集整理的react页面数据过多怎么办_解决 React-Native 加载数据页面卡顿问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。