React Native SectionList滚动JS帧率过低性能问题及优化问询

问题1：SectionList掉帧严重的原因及优化 #

你当前的代码已经实现了React.memo、useCallback等基础性能优化，不存在明显的代码写法错误，掉帧属于SectionList在特殊使用场景下的正常表现：

• 测试用例将10000条数据拆成了10000个独立section，每个section仅包含1条数据，而SectionList本身比FlatList多了section头部渲染、粘性头部位置计算、section分组边界判断等额外逻辑，10000个section的场景下，这部分额外计算开销会被放大几十上百倍，性能自然远差于同数据量的FlatList。
• SectionList的设计场景是少量section、每个section下包含大量数据，如果你的业务场景确实需要这么多独立分组，更建议直接用FlatList自行实现分组头部渲染，不要使用SectionList。

可优化的配置项如下：

• 关闭不需要的粘性头部逻辑：添加stickySectionHeadersEnabled={false}属性，这部分是SectionList性能开销最高的逻辑之一，关闭后性能会有明显提升
• 调整虚拟列表渲染参数：添加maxToRenderPerBatch={10}（单次批次渲染的元素数量）、windowSize={5}（视口前后预渲染的屏数，默认为21），减少非可见区域的渲染量
• 开启裁剪卸载：添加removeClippedSubviews={true}属性，自动卸载超出视口的元素，减少内存占用和渲染压力

问题2：无固定高度时帧率暴跌的原因 #

RN的虚拟列表（FlatList、SectionList均属于虚拟列表实现）依赖元素高度计算三个核心逻辑：

1. 滚动偏移量对应的元素位置
2. 列表整体的滚动区域长度
3. 前后预渲染的元素范围

如果没有给元素设置固定高度，也没有提前告知列表元素高度，每渲染一个新元素时都要触发JS线程和原生端的双向通信来测量布局高度，快速滚动时会在短时间内触发大量测量请求，直接占满JS线程的算力，导致帧率暴跌。

对应的优化方案是添加getItemLayout属性，提前将每个元素的高度、偏移量告知列表，不需要动态测量，不管是固定高度还是可计算的动态高度，都可以通过该属性实现，优化后性能会回到固定高度的水平。
示例（固定高度80的FlatList）：

<FlatList
  // 其余属性保持不变
  getItemLayout={(data, index) => ({
    length: 80,
    offset: 80 * index,
    index
  })}
/>

内容的提问来源于stack exchange，提问作者pachun