Taro UI 的 Indexes 索引选择器存在问题及优化点

疯狂的小波
313 阅读1分钟

存在问题

Taro UI的Indexes 索引选择器，当数据量达到2000条时，就非常卡顿，并且提示更新的数据量过大（数据传输长度为 1352 KB，存在有性能问题），在组件初始化和点击右侧索引进行滚动时，都会有该提示。实际上设置的数据长度只有37kb。taro中setData设置数据时，不光是设置了data的数据，还有所有的节点信息数据也全部都是setData中设置的？所以节点越复杂，设置的数据量也会越大？

初始化时数据

q1.png

q2.png

q3.png

渲染耗时 1887ms

自定义数据结构

而如果使用自定义的数据结构，setData的数据量只有200kb

// 自定义数据结构
<View className='page-view'>
  {area.map(item => {
    return (
      <View className='area-item' key={item.key}>
        <View className='area-title'>{item.title}</View>
        {item.items.map(e => {
          return (
            <View className='area-name' key={e.name}>
              {e.name}
            </View>
          );
        })}
      </View>
    );
  })}
</View>
// AtIndexes数据结构
// <View style='height:100vh'>
//   <AtIndexes list={area}></AtIndexes>
// </View>

q4.png

q5.png

渲染耗时 320ms

点击索引项时问题

Indexes组件，点击右侧索引项时，触发滚动到指定位置到效果。此时更新的数据居然是全量更新，也就是组件的所有数据的重新setData，导致效果非常的卡顿，并且前后会触发2次更新，都是全量。如下：

q6.png

优化点

Taro UI 的 Indexes：

  • 数据量大时也要保证性能问题 可以通过简化dom结构，数据的懒加载（如小程序的长列表组件recycle-view或虚拟列表）等方式优化 参考： recycle-view 长列表渲染（虚拟列表）
  • 点击索引滚动时，不做全量数据更新，只更新需要更新的内容，2次更新缩减为1次

参考

avatar
文章
阅读
粉丝