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

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

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

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

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

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

shouldComponentUpdate避免无变化的重复setState

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

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

3.InteractionManager：

• runAfterInteractions（）：稍后运行代码，而不延迟活动动画。

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

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

 

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

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

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

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

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

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