react页面数据过多怎么办_解决 React-Native 加载数据页面卡顿问题

一般情况下,我们在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,

});

}