一、无限滚动的核心原理

无限滚动（Infinite Scroll）是一种常见的交互模式，当用户滚动到列表底部时自动加载更多数据。理解其核心原理对于实现高性能的无限滚动至关重要。

1.1 核心机制

无限滚动的实现依赖于三个关键要素：

  1. 滚动检测：监听列表滚动事件，判断是否接近底部
  2. 数据加载：触发异步数据请求，获取下一页数据
  3. 状态管理：维护加载状态、分页信息、数据列表
用户滚动 → 检测距离底部 → 触发加载 → 更新数据 → 继续滚动

1.2 为什么需要无限滚动

  • 提升用户体验：避免分页点击，流畅浏览大量内容
  • 节省资源：按需加载，减少初始加载时间和内存占用
  • 适应移动端：符合移动设备的交互习惯

1.3 性能挑战

无限滚动面临的主要性能问题：

  • 内存占用：数据量持续增长，可能导致内存溢出
  • 渲染性能：大量 DOM 节点导致滚动卡顿
  • 网络请求：频繁请求可能造成服务器压力

二、FlatList 的无限滚动实现

FlatList 是 React Native 提供的高性能列表组件，内置了无限滚动的支持。

2.1 onEndReached 机制

onEndReached 是 FlatList 提供的核心属性，当滚动到列表底部时触发。

<FlatList
  onEndReached={handleEndReached}
  onEndReachedThreshold={0.1}
/>

onEndReachedThreshold 的作用：

  • 值范围：0-1
  • 表示距离底部多少比例时触发加载
  • 0.1 表示距离底部 10% 时触发
  • 值越小，触发越晚（更接近底部）

为什么需要这个阈值？

  • 提前触发可以避免用户等待
  • 给加载动画留出展示空间
  • 提升用户体验的流畅感

2.2 状态管理设计

合理的状态管理是无限滚动稳定运行的基础：

const [data, setData] = useState([]);        // 列表数据
const [loading, setLoading] = useState(false); // 加载状态
const [page, setPage] = useState(1);         // 当前页码
const [hasMore, setHasMore] = useState(true); // 是否还有更多数据

状态之间的依赖关系：

  • loading 为 true 时，禁止重复加载
  • hasMore 为 false 时，停止加载
  • page 控制每次加载的页码

2.3 防止重复加载

重复加载是无限滚动最常见的问题，解决方案：

const handleEndReached = useCallback(() => {
  // 三重保护机制
  if (!loading && hasMore && !refreshing) {
    loadData(page);
  }
}, [loading, hasMore, refreshing, page, loadData]);

为什么需要三重保护？

  • !loading：防止正在加载时再次触发
  • !hasMore：防止没有数据时继续加载
  • !refreshing：防止下拉刷新时触发加载

2.4 完整实现示例

const InfiniteScrollList = memo<InfiniteScrollListProps>(({ 
  initialData,
  onLoadMore,
  renderItem,
  keyExtractor,
}) => {
  const [data, setData] = useState<ListItem[]>(initialData);
  const [loading, setLoading] = useState(false);
  const [page, setPage] = useState(1);
  const [hasMore, setHasMore] = useState(true);

  const loadData = useCallback(async (pageNum: number) => {
    if (loading) return;
    
    setLoading(true);
    try {
      const newData = await onLoadMore?.(pageNum);
      
      if (newData && newData.length > 0) {
        setData(prev => [...prev, ...newData]);
        setPage(pageNum + 1);
        setHasMore(newData.length >= 10); // 假设每页10条
      } else {
        setHasMore(false);
      }
    } catch (error) {
      console.error('加载失败:', error);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  }, [loading, onLoadMore]);

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

  const renderFooter = useCallback(() => {
    if (loading) {
      return <LoadingIndicator />;
    }
    if (!hasMore && data.length > 0) {
      return <NoMoreIndicator />;
    }
    return null;
  }, [loading, hasMore, data.length]);

  useEffect(() => {
    loadData(1);
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.1}
      ListFooterComponent={renderFooter}
    />
  );
});

三、ScrollView 的横向无限滚动

对于横向滚动场景，需要使用 ScrollView 并手动计算滚动位置。

3.1 滚动事件监听

ScrollView 的 onScroll 事件提供了滚动位置的详细信息：

const handleScroll = useCallback((event: any) => {
  const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
  
  // 计算距离右边的距离
  const distanceFromEnd = contentSize.width - contentOffset.x - layoutMeasurement.width;
  
  // 当距离小于 100px 时触发加载
  if (distanceFromEnd < 100 && !loading && hasMore) {
    loadData(page);
  }
}, [loading, hasMore, page, loadData]);

滚动事件的关键参数：

  • contentOffset.x：当前滚动的 x 坐标
  • contentSize.width：内容的总宽度
  • layoutMeasurement.width：可视区域的宽度

3.2 性能优化

滚动事件触发频率很高，需要优化性能：

<ScrollView
  onScroll={handleScroll}
  scrollEventThrottle={16} // 限制事件触发频率为 60fps
/>

scrollEventThrottle 的作用：

  • 限制滚动事件的触发频率
  • 16ms 约等于 60fps（1000ms / 60 ≈ 16ms）
  • 避免过度频繁的事件处理

3.3 完整实现示例

const HorizontalInfiniteScroll = memo<HorizontalInfiniteScrollProps>(({ 
  initialData,
  onLoadMore,
  renderItem,
  keyExtractor,
}) => {
  const [data, setData] = useState<ListItem[]>(initialData);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const loadData = useCallback(async (pageNum: number) => {
    if (loading) return;
    
    setLoading(true);
    try {
      const newData = await onLoadMore?.(pageNum);
      
      if (newData && newData.length > 0) {
        setData(prev => [...prev, ...newData]);
        setPage(pageNum + 1);
        setHasMore(newData.length >= 10);
      } else {
        setHasMore(false);
      }
    } catch (error) {
      console.error('加载失败:', error);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  }, [loading, onLoadMore]);

  const handleScroll = useCallback((event: any) => {
    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
    const distanceFromEnd = contentSize.width - contentOffset.x - layoutMeasurement.width;
    
    if (distanceFromEnd < 100 && !loading && hasMore) {
      loadData(page);
    }
  }, [loading, hasMore, page, loadData]);

  useEffect(() => {
    loadData(1);
  }, []);

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      onScroll={handleScroll}
      scrollEventThrottle={16}
    >
      {data.map((item) => (
        <View key={keyExtractor(item)} style={styles.horizontalItem}>
          {renderItem({ item })}
        </View>
      ))}
      {loading && <LoadingIndicator />}
    </ScrollView>
  );
});

四、下拉刷新的实现

下拉刷新是无限滚动的常见补充功能，允许用户手动刷新数据。

4.1 RefreshControl 组件

React Native 提供了 RefreshControl 组件来实现下拉刷新：

<FlatList
  refreshControl={
    <RefreshControl
      refreshing={refreshing}
      onRefresh={handleRefresh}
      colors={['#409EFF']}
      tintColor="#409EFF"
    />
  }
/>

RefreshControl 的关键属性：

  • refreshing：控制刷新状态
  • onRefresh：刷新触发时的回调
  • colors：Android 上的加载指示器颜色
  • tintColor：iOS 上的加载指示器颜色

4.2 刷新逻辑

刷新时需要重置数据和页码：

const handleRefresh = useCallback(async () => {
  setRefreshing(true);
  try {
    const newData = await onRefresh?.();
    if (newData) {
      setData(newData);      // 重置数据
      setPage(2);            // 重置页码
      setHasMore(true);      // 重置是否有更多数据
    }
  } catch (error) {
    console.error('刷新失败:', error);
  } finally {
    setRefreshing(false);
  }
}, [onRefresh]);

刷新与加载更多的区别：

  • 刷新：替换当前数据，从第一页开始
  • 加载更多：追加数据，从下一页开始

4.3 防止刷新时加载更多

刷新时应该禁止加载更多：

const handleEndReached = useCallback(() => {
  // 添加 !refreshing 判断
  if (!loading && hasMore && !refreshing) {
    loadData(page);
  }
}, [loading, hasMore, refreshing, page, loadData]);

五、性能优化策略

无限滚动在数据量大时容易出现性能问题，需要采取多种优化策略。

5.1 虚拟化渲染

FlatList 默认使用虚拟化渲染，只渲染可见区域的项：

<FlatList
  removeClippedSubviews={true}        // 移除屏幕外的子视图
  maxToRenderPerBatch={10}            // 每批最多渲染 10 个
  windowSize={21}                     // 渲染窗口大小
  initialNumToRender={10}             // 初始渲染数量
  updateCellsBatchingPeriod={50}      // 批量更新间隔
/>

各参数的作用：

  • removeClippedSubviews：移除不可见的视图，减少内存占用
  • maxToRenderPerBatch：控制每次渲染的项数，避免卡顿
  • windowSize：控制渲染窗口大小，影响滚动流畅度
  • initialNumToRender：初始渲染数量，影响首屏加载速度
  • updateCellsBatchingPeriod：批量更新间隔，平衡流畅度和响应速度

5.2 列表项优化

使用 memo 优化列表项组件，避免不必要的重新渲染：

const ListItemComponent = memo(({ item }: { item: ListItem }) => (
  <View style={styles.listItem}>
    <Text style={styles.listItemTitle}>{item.title}</Text>
    <Text style={styles.listItemDescription}>{item.description}</Text>
  </View>
));

memo 的工作原理：

  • 对比 props 是否变化
  • 只有 props 变化时才重新渲染
  • 大幅减少不必要的渲染

5.3 回调函数优化

使用 useCallback 优化回调函数，避免子组件不必要的重新渲染：

const renderItem = useCallback(({ item }: { item: ListItem }) => (
  <ListItemComponent item={item} />
), []);

const keyExtractor = useCallback((item: ListItem) => item.id, []);

useCallback 的作用：

  • 缓存函数引用
  • 避免每次渲染都创建新函数
  • 减少子组件的重新渲染

5.4 数据分页策略

合理的数据分页策略可以显著提升性能：

const PAGE_SIZE = 10; // 每页数据量

// 判断是否还有更多数据
setHasMore(newData.length >= PAGE_SIZE);

// 预加载策略
const handleScroll = (event) => {
  const distanceFromEnd = contentSize.height - contentOffset.y - layoutMeasurement.height;
  
  // 距离底部 300px 时就开始加载
  if (distanceFromEnd < 300 && !loading && hasMore) {
    loadData(page);
  }
};

分页策略的考虑因素：

  • 每页数据量：10-20 条通常比较合适
  • 触发距离：300-500px 可以提供流畅的体验
  • 网络环境：根据网络状况调整策略

六、常见问题与解决方案

6.1 加载更多不触发

问题现象： 滚动到底部时没有触发加载

可能原因：

  1. onEndReachedThreshold 设置过大
  2. 列表高度不足，无法滚动
  3. loading 状态一直为 true

解决方案：

// 1. 调整阈值
onEndReachedThreshold={0.1}

// 2. 确保列表可以滚动
<FlatList style={{ flex: 1 }} />

// 3. 确保加载状态正确重置
finally {
  setLoading(false);
}

6.2 重复加载

问题现象： 同一页数据被多次加载

可能原因：

  1. 没有添加 loading 状态判断
  2. onEndReached 触发频率过高

解决方案：

// 添加完整的状态判断
const handleEndReached = useCallback(() => {
  if (!loading && hasMore && !refreshing) {
    loadData(page);
  }
}, [loading, hasMore, refreshing, page, loadData]);

// 使用防抖
const debouncedLoadMore = useMemo(
  () => debounce(() => loadData(page), 300),
  [page, loadData]
);

6.3 列表卡顿

问题现象： 滚动时出现明显卡顿

可能原因：

  1. 列表项渲染复杂
  2. 没有使用虚拟化
  3. 数据量过大

解决方案：

// 1. 使用 memo 优化列表项
const ListItem = memo(({ item }) => { /* ... */ });

// 2. 启用虚拟化
<FlatList
  removeClippedSubviews={true}
  maxToRenderPerBatch={10}
  windowSize={21}
/>

// 3. 使用 useCallback 优化回调
const renderItem = useCallback(({ item }) => (
  <ListItem item={item} />
), []);

6.4 内存占用过高

问题现象： 滚动一段时间后应用变慢或崩溃

可能原因：

  1. 数据无限增长
  2. 没有清理旧数据
  3. 图片缓存过多

解决方案：

// 1. 限制数据总量
const MAX_DATA_SIZE = 100;

const loadData = async (pageNum) => {
  const newData = await onLoadMore(pageNum);
  setData(prev => {
    const combined = [...prev, ...newData];
    return combined.slice(-MAX_DATA_SIZE); // 只保留最近 100 条
  });
};

// 2. 使用虚拟化
<FlatList removeClippedSubviews={true} />

// 3. 优化图片加载
<Image
  source={{ uri: item.image }}
  defaultSource={require('./placeholder.png')}
/>

七、完整实战代码

import React, { useState, useEffect, useCallback, useRef, memo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  ActivityIndicator,
  ScrollView,
  SafeAreaView,
  RefreshControl,
} from 'react-native';

// 列表项类型
interface ListItem {
  id: string;
  title: string;
  description: string;
  timestamp: number;
}

// 无限滚动组件 Props 类型
interface InfiniteScrollListProps {
  initialData: ListItem[];
  onLoadMore?: (page: number) => Promise<ListItem[]>;
  onRefresh?: () => Promise<ListItem[]>;
  renderItem: (info: { item: ListItem }) => React.ReactElement | null;
  keyExtractor: (item: ListItem) => string;
  emptyText?: string;
}

// 无限滚动组件
const InfiniteScrollList = memo<InfiniteScrollListProps>(({ 
  initialData,
  onLoadMore,
  onRefresh,
  renderItem,
  keyExtractor,
  emptyText = '暂无数据',
}) => {
  const [data, setData] = useState<ListItem[]>(initialData);
  const [loading, setLoading] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const loadData = useCallback(async (pageNum: number, isRefresh: boolean = false) => {
    if (loading) return;
    
    setLoading(true);
    try {
      const newData = await onLoadMore?.(pageNum);
      
      if (newData && newData.length > 0) {
        if (isRefresh) {
          setData(newData);
          setPage(2);
        } else {
          setData(prev => [...prev, ...newData]);
          setPage(pageNum + 1);
        }
        setHasMore(newData.length >= 10);
      } else {
        setHasMore(false);
      }
    } catch (error) {
      console.error('加载失败:', error);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  }, [loading, onLoadMore]);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    try {
      const newData = await onRefresh?.();
      if (newData) {
        setData(newData);
        setPage(2);
        setHasMore(true);
      }
    } catch (error) {
      console.error('刷新失败:', error);
    } finally {
      setRefreshing(false);
    }
  }, [onRefresh]);

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

  const renderFooter = useCallback(() => {
    if (loading) {
      return (
        <View style={styles.footer}>
          <ActivityIndicator size="small" color="#409EFF" />
          <Text style={styles.footerText}>加载中...</Text>
        </View>
      );
    }
    if (!hasMore && data.length > 0) {
      return (
        <View style={styles.footer}>
          <Text style={styles.footerText}>没有更多了</Text>
        </View>
      );
    }
    return null;
  }, [loading, hasMore, data.length]);

  const renderEmpty = useCallback(() => {
    if (!loading && data.length === 0) {
      return (
        <View style={styles.emptyContainer}>
          <Text style={styles.emptyText}>{emptyText}</Text>
        </View>
      );
    }
    return null;
  }, [loading, data.length, emptyText]);

  useEffect(() => {
    loadData(1);
  }, []);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={handleEndReached}
      onEndReachedThreshold={0.1}
      ListFooterComponent={renderFooter}
      ListEmptyComponent={renderEmpty}
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={handleRefresh}
          colors={['#409EFF']}
          tintColor="#409EFF"
        />
      }
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      windowSize={21}
      initialNumToRender={10}
      updateCellsBatchingPeriod={50}
      showsVerticalScrollIndicator={false}
    />
  );
});

InfiniteScrollList.displayName = 'InfiniteScrollList';

// 横向无限滚动组件 Props 类型
interface HorizontalInfiniteScrollProps {
  initialData: ListItem[];
  onLoadMore?: (page: number) => Promise<ListItem[]>;
  renderItem: (info: { item: ListItem }) => React.ReactElement | null;
  keyExtractor: (item: ListItem) => string;
}

// 横向无限滚动组件
const HorizontalInfiniteScroll = memo<HorizontalInfiniteScrollProps>(({ 
  initialData,
  onLoadMore,
  renderItem,
  keyExtractor,
}) => {
  const [data, setData] = useState<ListItem[]>(initialData);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const [page, setPage] = useState(1);

  const loadData = useCallback(async (pageNum: number) => {
    if (loading) return;
    
    setLoading(true);
    try {
      const newData = await onLoadMore?.(pageNum);
      
      if (newData && newData.length > 0) {
        setData(prev => [...prev, ...newData]);
        setPage(pageNum + 1);
        setHasMore(newData.length >= 10);
      } else {
        setHasMore(false);
      }
    } catch (error) {
      console.error('加载失败:', error);
      setHasMore(false);
    } finally {
      setLoading(false);
    }
  }, [loading, onLoadMore]);

  const handleScroll = useCallback((event: any) => {
    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
    const distanceFromEnd = contentSize.width - contentOffset.x - layoutMeasurement.width;
    
    if (distanceFromEnd < 100 && !loading && hasMore) {
      loadData(page);
    }
  }, [loading, hasMore, page, loadData]);

  useEffect(() => {
    loadData(1);
  }, []);

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      onScroll={handleScroll}
      scrollEventThrottle={16}
    >
      {data.map((item) => (
        <View key={keyExtractor(item)} style={styles.horizontalItem}>
          {renderItem({ item })}
        </View>
      ))}
      {loading && (
        <View style={styles.horizontalLoading}>
          <ActivityIndicator size="small" color="#409EFF" />
        </View>
      )}
    </ScrollView>
  );
});

HorizontalInfiniteScroll.displayName = 'HorizontalInfiniteScroll';

// 列表项组件
const ListItemComponent = memo(({ item }: { item: ListItem }) => (
  <View style={styles.listItem}>
    <View style={styles.listItemContent}>
      <Text style={styles.listItemTitle}>{item.title}</Text>
      <Text style={styles.listItemDescription} numberOfLines={2}>
        {item.description}
      </Text>
      <Text style={styles.listItemTimestamp}>
        {new Date(item.timestamp).toLocaleString()}
      </Text>
    </View>
  </View>
));

ListItemComponent.displayName = 'ListItemComponent';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F7FA',
  },
  listItem: {
    backgroundColor: '#FFFFFF',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    shadowColor: '#000000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.08,
    shadowRadius: 8,
    elevation: 4,
  },
  listItemContent: {
    flex: 1,
  },
  listItemTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#303133',
    marginBottom: 8,
  },
  listItemDescription: {
    fontSize: 14,
    color: '#606266',
    marginBottom: 8,
    lineHeight: 20,
  },
  listItemTimestamp: {
    fontSize: 12,
    color: '#909399',
  },
  horizontalItem: {
    width: 200,
    marginRight: 12,
  },
  horizontalLoading: {
    width: 60,
    justifyContent: 'center',
    alignItems: 'center',
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  footerText: {
    fontSize: 14,
    color: '#909399',
    marginLeft: 8,
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 80,
  },
  emptyText: {
    fontSize: 16,
    color: '#909399',
  },
});

export default App;

在这里插入图片描述

八、总结

无限滚动是一个看似简单但实际实现复杂的交互模式。掌握其核心原理和最佳实践对于构建高性能的移动应用至关重要。

关键要点：

  1. 理解无限滚动的核心机制：滚动检测 → 数据加载 → 状态管理
  2. 合理使用 FlatList 的 onEndReached 实现垂直无限滚动
  3. 使用 ScrollView 的 onScroll 实现横向无限滚动
  4. 通过 RefreshControl 实现下拉刷新功能
  5. 采用多种性能优化策略：虚拟化、memo、useCallback
  6. 处理常见问题：重复加载、列表卡顿、内存占用

最佳实践：

  • 始终添加加载状态判断，防止重复加载
  • 使用 memo 和 useCallback 优化性能
  • 合理配置虚拟化参数
  • 提供清晰的加载状态和空状态提示
  • 处理好刷新和加载更多的冲突

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

# react native # react.js # javascript
Logo
人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

cover

React Native 鸿蒙跨平台开发：Badge 徽章组件代码实现

avatar 人工智能6S服务平台
cover

React Native鸿蒙跨平台实现“分组项卡片 + 成员项卡片 + 创建分组模态 + 分组管理模态”的组件栈

avatar 人工智能6S服务平台
cover

React Native 鸿蒙跨平台开发：HorizontalScroll 横向滚动代码指南

avatar 人工智能6S服务平台