分页追加数据时React Native SectionList出现跳转/闪烁问题

问题背景 #

使用react-query的useInfiniteQuery实现分页加载，返回的分页数据已扁平化。加载并渲染第三页（最后一页）数据时，SectionList出现跳转/闪烁异常，但第二页渲染正常。

分页数据结构 #

• Page 1数据

0: {title: '2024-07-11', data: Array(3)}...length:10

• Page 2数据

0: {title: '2024-07-11', data: Array(3)}...length:19

• Page 3数据

0: {title: '2024-07-11', data: Array(3)}...length:28

异常表现 #

已尝试的优化 #

添加initialNumToRender、maxToRenderPerBatch等性能优化参数，但问题反而恶化。相关代码片段：

import format from 'date-fns/format';
// 其余代码...

解决方案 #

1. 给SectionList配置稳定唯一的key #

SectionList依赖稳定的key追踪元素身份，避免重渲染时布局错位：

• 给每个section添加唯一key字段（若title重复，可结合分页偏移量或数据唯一标识生成）
• 列表项的key不要用数组索引，改用数据本身的唯一ID

2. 合并重复的Section数据 #

从分页数据可见，每页都存在重复title的section，直接扁平化会导致SectionList重复渲染同标题section，触发布局混乱。处理分页数据时合并同标题的section：

import { useMemo } from 'react';

// 在组件中合并sections
const mergedSections = useMemo(() => {
  const sectionMap = new Map();
  // 遍历所有分页数据
  data.pages.forEach(page => {
    page.forEach(section => {
      if (sectionMap.has(section.title)) {
        // 合并相同title的data数组
        sectionMap.get(section.title).data.push(...section.data);
      } else {
        // 新增section，深拷贝避免原数据被修改
        sectionMap.set(section.title, { ...section, data: [...section.data] });
      }
    });
  });
  return Array.from(sectionMap.values());
}, [data]);

将合并后的mergedSections传给SectionList，避免重复section导致的布局计算异常。

3. 锁定可见内容位置 #

加载新数据时，SectionList可能自动调整滚动位置，可通过maintainVisibleContentPosition参数锁定当前可见区域：

<SectionList
  sections={mergedSections}
  maintainVisibleContentPosition={{
    minIndexForVisible: 0,
    autoscrollToTopThreshold: 0,
  }}
  // 其他配置项
/>

4. 缓存处理后的数据 #

用useMemo缓存合并后的sections数组，只有当分页数据data变化时才重新计算，避免因数组引用变化导致SectionList全量重渲染。

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