Taro ScrollView 大列表的性能问题

示意图

相信大家对这种选择城市列表都不陌生,这次的性能瓶颈出现在当这个城市列表数据量较大,达到1000+时,通过拖动右侧的字母定位,对 ScrollView 进行快速的锚点定位,同时字母定位高亮时,就会出现卡顿的情况。

在使用微信小程序原生开发时,未出现这个性能问题。但是用 Taro 重写时,代码逻辑一模一样,并且对 react rerender 进行精准控制后,依然会有卡顿。

最后的解决方案比较尴尬,在小程序端干掉了吸顶定位和侧边栏字母的高亮展示,简单说就是在拖动字母锚点定位列表时,没有任何的 setState 操作,组件之间的通信都通过 ref 进行调用,这样才能保证 ScrollView 滚动时不出现卡顿情况。当然这种卡顿只有当列表项较多的情况才会出现,亲测列表项在300-400条数据时,有 setState 操作对滚动的影响还是比较小的,也没有明显的卡顿。

所以最后要如何实现还是要看具体的业务场景了~

你可能感兴趣的:(Taro ScrollView 大列表的性能问题)