如何在React Native中对从API获取的数据进行分页

React Native 数据分页实现指南

基础概念

数据分页是指将大量数据分成多个小块（页）进行加载和显示的技术，主要目的是：

减少一次性加载的数据量
提高应用性能
改善用户体验
降低服务器负载

实现方案

1. 基础分页实现

import React, { useState, useEffect } from 'react';
import { FlatList, View, Text, ActivityIndicator } from 'react-native';

const PaginationExample = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const fetchData = async () => {
    if (!hasMore || loading) return;
    
    setLoading(true);
    try {
      const response = await fetch(`https://api.example.com/data?page=${page}&limit=10`);
      const newData = await response.json();
      
      if (newData.length === 0) {
        setHasMore(false);
      } else {
        setData(prevData => [...prevData, ...newData]);
        setPage(prevPage => prevPage + 1);
      }
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  const renderFooter = () => {
    if (!loading) return null;
    return (
      <View style={{ paddingVertical: 20 }}>
        <ActivityIndicator size="large" />
      </View>
    );
  };

  const handleLoadMore = () => {
    if (hasMore && !loading) {
      fetchData();
    }
  };

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={{ padding: 20 }}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={(item, index) => index.toString()}
      onEndReached={handleLoadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
    />
  );
};

export default PaginationExample;

2. 分页类型

偏移分页 (Offset Pagination)

使用 page 和 limit 参数
简单易实现
适合数据不经常变化的场景

游标分页 (Cursor Pagination)

使用 cursor 或 after 参数
基于记录的唯一标识
适合数据频繁更新的场景

3. 优化技巧

防抖处理：避免快速滚动时多次触发加载

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

缓存策略：使用 Redux 或 Context API 缓存已加载数据
预加载：在接近列表底部时提前加载下一页
错误处理：添加重试机制

常见问题及解决方案

问题1：重复加载同一页数据

原因：快速滚动导致多次触发 onEndReached 解决：添加防抖或节流控制

问题2：列表跳动

原因：新数据加载导致布局变化解决：固定列表项高度或使用 getItemLayout

问题3：内存泄漏

原因：组件卸载时未取消异步操作解决：使用 AbortController 取消请求

useEffect(() => {
  const controller = new AbortController();
  
  const fetchData = async () => {
    try {
      const response = await fetch(url, { signal: controller.signal });
      // 处理响应
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Error:', error);
      }
    }
  };
  
  fetchData();
  
  return () => controller.abort();
}, [url]);

应用场景

社交媒体动态列表
电商商品列表
消息历史记录
搜索结果展示
任何需要展示大量数据的列表视图

高级实现

使用 React Query 进行分页

import { useInfiniteQuery } from 'react-query';

const fetchPosts = async ({ pageParam = 1 }) => {
  const res = await fetch(`https://api.example.com/posts?page=${pageParam}`);
  return res.json();
};

function Posts() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
  } = useInfiniteQuery('posts', fetchPosts, {
    getNextPageParam: (lastPage, allPages) => {
      return lastPage.hasNext ? allPages.length + 1 : undefined;
    },
  });

  const posts = data?.pages.flatMap(page => page.posts) || [];

  return (
    <FlatList
      data={posts}
      renderItem={({ item }) => <PostItem post={item} />}
      onEndReached={() => hasNextPage && fetchNextPage()}
      ListFooterComponent={() => isFetchingNextPage && <LoadingIndicator />}
    />
  );
}

通过以上方法，你可以高效地在 React Native 中实现数据分页功能，提升应用性能和用户体验。