解决 React-Native 加载数据页面卡顿问题

Posted 2023-04-17

参考技术A 一般情况下,我们在 componentDidMount 方法里面执行请求数据.根据字面意思:页面组件加载完毕,然后请求数据. 对的 ,没毛病!!!

然而问题就出现,当我们跳转到新页面时,到界面请求完数据,更新状态机.中间会出现一个界面卡顿的现象.我的理解是，页面组件还未加载完就已经开始请求数据了，这应该是 RN 的一个bug吧，纯属我瞎猜！

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

InteractionManager:从名称上可以看出，这是一个管理互动操作的工具。其中有一个方法runAfterInteraction（func）。这个方法用来标记参数中传入的方法在所有当前进行的交互和动画完成后再执行。可以理解为将func加入到一个等待队列。
我们可以使用这个方法来避免在Component进入画面的动画完成前打断动画的问题。类似于这样：

请求数据 freshData

参考: http://blog.csdn.net/angelseedex/article/details/53339107

前端 页面卡顿加载慢是怎么回事

参考技术A 很常见，那是因为你填充的比例太小，填充密度太高，尤其是大面积的填充，如果太密就会很卡所以填充的时候，在你不了解该图案的填充比例的时候，填充后要先点预览，看看疏密，调节合适的填充比例，不要直接点击确定