React Native中Firebase实时数据库分页加载实现方案（非实时）

• 需求：实现列表页面，基于@react-native-firebase/database库从Firebase实时数据库分页加载数据，无需实时更新数据。
• 遇到的问题：
  1. 最初使用on('value')实时监听时，手动更新数据库会触发监听器，导致数据重复添加，百万级数据下的去重成本过高。
  2. 改用once('value')单次读取后，手动更新数据库再调用加载函数，无法获取到最新数据，不符合预期。
• 当前代码存在的逻辑问题：
  • 分页查询使用startAt(lastKeyItem)会包含上一页的最后一条数据，导致重复加载。
  • lastKeyItem错误取了当前页第一条数据的key，应该取最后一条的key作为下一页的起始标记。
  • 变量名拼写错误：PAGINATION_LIMT应为PAGINATION_LIMIT。

核心修正点 #

1. 修复分页查询逻辑

   • 用startAfter替代startAt，避免重复获取上一页的最后一条数据。
   • 将lastKeyItem更新为当前页最后一条数据的key，确保下一页从正确位置开始加载。
   • 修正变量名拼写错误。

2. 解决手动更新后数据不更新的问题

   • 添加下拉刷新功能，用户主动触发时重置分页状态、重新加载第一页数据，确保能获取到数据库的最新内容。
   • 保持使用once('value')单次读取，仅在初始加载、滚动到底部、下拉刷新这三种用户主动触发的场景下获取数据，避免实时监听带来的重复问题。

修正后的完整代码 #

import database from '@react-native-firebase/database';
import { useState, useEffect } from 'react';
import { View, Text, FlatList, RefreshControl } from 'react-native';

const UserListingPage = () => {
    const [userData, setUserData] = useState([]);
    const [lastKeyItem, setLastKeyItem] = useState(null);
    const [isLoading, setIsLoading] = useState(false);
    const [isRefreshing, setIsRefreshing] = useState(false);
    const PAGINATION_LIMIT = 25;

    const loadDataFromFirebase = async (isRefresh = false) => {
        // 避免重复触发加载请求
        if (isLoading) return;
        setIsLoading(true);

        try {
            const reference = database().ref('/userListing/');
            let query = reference.orderByKey();

            if (isRefresh) {
                // 下拉刷新时重置分页，加载第一页
                query = query.limitFirst(PAGINATION_LIMIT);
            } else if (lastKeyItem) {
                // 加载下一页，从lastKeyItem之后的条目开始
                query = query.startAfter(lastKeyItem).limitFirst(PAGINATION_LIMIT);
            } else {
                // 初始加载第一页
                query = query.limitFirst(PAGINATION_LIMIT);
            }

            const snapshot = await query.once('value');
            if (snapshot.exists()) {
                const fetchedData = Object.entries(snapshot.val());
                if (isRefresh) {
                    // 刷新时直接替换原有数据
                    setUserData(fetchedData);
                    setLastKeyItem(fetchedData.length > 0 ? fetchedData[fetchedData.length - 1][0] : null);
                } else {
                    // 加载下一页时追加数据
                    setUserData(prev => [...prev, ...fetchedData]);
                    setLastKeyItem(fetchedData.length > 0 ? fetchedData[fetchedData.length - 1][0] : lastKeyItem);
                }
            } else if (isRefresh) {
                // 刷新时无数据，清空列表并重置分页标记
                setUserData([]);
                setLastKeyItem(null);
            }
        } catch (error) {
            console.error('加载数据失败:', error);
        } finally {
            setIsLoading(false);
            setIsRefreshing(false);
        }
    };

    useEffect(() => {
        // 页面初始化时加载第一页数据
        loadDataFromFirebase();
    }, []);

    const handleRefresh = () => {
        setIsRefreshing(true);
        // 触发下拉刷新流程
        loadDataFromFirebase(true);
    };

    return (
        <View style={{ flex: 1 }}>
            <FlatList
                data={userData}
                renderItem={({ item }) => <Text style={{ padding: 16, borderBottomWidth: 1 }}>{item[1].name}</Text>}
                onEndReached={() => loadDataFromFirebase()}
                onEndReachedThreshold={0.1} // 滚动到距离底部10%时触发下一页加载
                refreshControl={
                    <RefreshControl
                        refreshing={isRefreshing}
                        onRefresh={handleRefresh}
                    />
                }
                keyExtractor={(item) => item[0]} // 使用数据库的key作为列表项唯一标识
            />
        </View>
    );
};

export default UserListingPage;

额外优化说明 #

• 添加isLoading状态，防止用户频繁触发加载请求导致重复调用。
• 用async/await替代回调函数，提升代码可读性和可维护性。
• 给FlatList添加keyExtractor，避免渲染警告。
• 设置onEndReachedThreshold参数，优化滚动加载的触发时机。

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