一般情況下,我們在componentDidMount方法里面執行請求數據.根據字面意思:頁面組件加載完畢,然后請求數據. 對的 ,沒毛病!!!

然而問題就出現,當我們跳轉到新頁面時,到界面請求完數據,更新狀態機.中間會出現一個界面卡頓的現象.我的理解是，頁面組件還未加載完就已經開始請求數據了，這應該是RN的一個bug吧，純屬我瞎猜！

解決辦法

await InteractionManager.runAfterInteractions();

在componentDidMount()方法中加上InteractionManager.runAfterInteractions();

InteractionManager:從名稱上可以看出，這是一個管理互動操作的工具。其中有一個方法runAfterInteraction(func)。這個方法用來標記參數中傳入的方法在所有當前進行的交互和動畫完成后再執行。可以理解為將func加入到一個等待隊列。

我們可以使用這個方法來避免在Component進入畫面的動畫完成前打斷動畫的問題。類似于這樣：

async componentDidMount(){

//當前進行的交互和動畫完成后再執行,執行下面的其他方法

await InteractionManager.runAfterInteractions();

await this.freshData();

this.setState({

ready: true,

});

}

請求數據freshData

freshData= async ()=>{

//下拉刷新時,重置為1

this.start=1;

const json = await this.fetchData();

this.setState({

movies: json.data.data.products,

});

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。