React native 界面响应慢 卡顿的几个优化方向(思路)

React native 界面响应慢 卡顿的几个解决思路(陆续整理中)

最近在项目优化中整理了一些对优化性能有帮助的线索,大家可以参考一下:

1.耗时的操作使用Promise异步操作(如果用户界面操作频率很高可能依然会出现标题4的情况)

避免出现长时间等待的情况。

React native 界面响应慢 卡顿的几个优化方向(思路)_第1张图片

2.避免过度绘制,自定义组件可以考虑继承PureComponent

shouldComponentUpdate避免无变化的重复setState

生命周期文档https://blog.csdn.net/loveseal518/article/details/106145673

检查代码,能合并的刷新尽量合并。

这里写图片描述

3.InteractionManager:

  • runAfterInteractions():稍后运行代码,而不延迟活动动画。

触摸处理系统将一个或多个活动触摸视为“互动”,并会延迟runAfterInteractions()回调,直到所有触摸结束或取消。

通俗来说就是当你正在交互或有动画执行时,运行代码会被推迟,但是如果你先执行了大量耗时代码再去交互,交互开始的时候可能会掉帧。

React native 界面响应慢 卡顿的几个优化方向(思路)_第2张图片

 

4.过于集中的大量数据处理在JS的单线程中运行时,会‘短暂’的延迟一下RN的手势事件的开始。

React native 界面响应慢 卡顿的几个优化方向(思路)_第3张图片

当卡顿发生时,判断手势事件的开始节点就较晚开始。

对比发现,同样的情况下,页面中的原生控件就不会收到JS线程卡顿的影响,这里的确让人难以取舍,原生响应快,但是需要维护2套。

那么如果还想继续使用RN自定义组件并试图优化的话可以试试下面2个方式:

4.1 可以考虑将大量数据分散到原生的子线程中去处理,处理完以后再将结果通知到RN

4.2 可以考虑增加友好的等待提示用户

你可能感兴趣的:(react,native,react,native)