Expo中React Native FlatList大数据集下onScroll响应迟缓问题

问题背景 #

我开发的Expo React Native应用包含随滚动方向动画切换的头部、底部栏和操作按钮，首页设有「社交帖子」和「排行榜」两个标签页：「社交帖子」通过FlatList展示从API加载的动态内容，支持触底加载更多；「排行榜」为静态内容。

当前遇到的问题：当「社交帖子」列表数据量增大时，FlatList的onScroll事件响应变得不稳定，无法持续触发，导致头部、底部栏和操作按钮停留在最后状态，不再响应滚动动作。虽已尝试通过lodash.throttle节流onScroll事件、用useMemo和useCallback优化列表项渲染、减少重渲染等性能优化手段，但问题仍存在，滚动体验卡顿。

优化方案 #

1. 优化onScroll事件触发逻辑 #

FlatList原生提供scrollEventThrottle属性，用来控制滚动事件的触发频率（单位：毫秒），比第三方节流工具更贴合RN的原生渲染机制。建议设置为16（对应60fps的刷新间隔），同时简化事件传递逻辑：

// 通过store钩子获取稳定的setScrollY方法
const setScrollY = useWindowScrollStore(state => state.setScrollY);

const onListScroll = useCallback(
  throttle(({ nativeEvent }) => {
    setScrollY(nativeEvent.contentOffset.y);
  }, 16), // 配合scrollEventThrottle调整节流时间
  [setScrollY]
);

// 修改FlatList的props
<FlatList
  // ...其他属性
  scrollEventThrottle={16}
  onScroll={onListScroll}
/>

避免在节流函数内直接调用getState()，改用钩子获取状态更新方法，减少不必要的状态订阅开销。

2. 彻底优化列表项渲染 #

将列表项抽成独立组件并用React.memo包裹，避免因父组件重渲染导致所有列表项重复渲染：

// 独立的帖子项组件，用React.memo浅比较props
const PostItem = React.memo(({ item }) => (
  <View style={styles.postContainer}>
    {/* 推荐用Expo FastImage替代原生Image，支持缓存和渐进式加载 */}
    <Image source={{ uri: item.thumbnail }} style={styles.image} />
    <Text style={styles.postText}>{item.title}</Text>
    <Text style={styles.descriptionText}>{item.description}</Text>
  </View>
));

// 原renderItem改为
const renderItem = useCallback(({ item }) => <PostItem item={item} />, []);

图片加载推荐使用expo-fast-image，它能减少图片加载对主线程的阻塞，提升滚动流畅度。

3. FlatList高级性能配置 #

启用原生的视图裁剪和分批渲染机制，减少内存占用和主线程压力：

<FlatList
  // ...其他属性
  removeClippedSubviews={true} // 自动移除可视区域外的组件
  maxToRenderPerBatch={5} // 每次批量渲染的列表项数量
  windowSize={5} // 预渲染的可视区域范围（单位：屏幕高度）
/>

这些属性能有效控制FlatList的渲染范围，避免一次性渲染大量列表项导致的卡顿。

4. 触底加载逻辑优化 #

给触底加载逻辑加上稳定的回调函数，避免频繁触发请求：

const handleEndReached = useCallback(() => {
  if (hasMore && !loading) {
    fetchData();
  }
}, [hasMore, loading, fetchData]);

// 修改FlatList的onEndReached
<FlatList
  // ...其他属性
  onEndReached={handleEndReached}
/>

确保fetchData也用useCallback包裹，保证引用稳定：

const fetchData = useCallback(async () => {
  if (loading) return;
  setLoading(true);
  try {
    const response = await fetch(`https://dummyjson.com/products?limit=10&skip=${(page - 1) * 10}`);
    const result = await response.json();
    if (result.products.length > 0) {
      setData(prev => [...prev, ...result.products]);
      setPage(prev => prev + 1);
    } else {
      setHasMore(false);
    }
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    setLoading(false);
  }
}, [loading, page]);

5. 避免全局状态更新阻塞滚动 #

如果状态管理库的更新逻辑较重，可以将滚动位置的更新改为非阻塞的异步操作，确保滚动状态更新不会阻塞UI线程：

const onListScroll = useCallback(
  throttle(({ nativeEvent }) => {
    requestAnimationFrame(() => {
      setScrollY(nativeEvent.contentOffset.y);
    });
  }, 16),
  [setScrollY]
);

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