Firebase React Native实时数据库：高效处理初始加载与实时更新

// 初始加载消息
useEffect(() => {
    chatRef.child('messages').orderByChild('createdAt').once('value').then(snapshot => {
        setMessages(Object.values(snapshot.val() || {}))
    })
}, [])

// 监听新消息
useEffect(() => {
    const onValueChange = chatRef.child('messages')
        .on('child_added', snapshot => {
            const data = snapshot.val()
            console.log(currentUser.uid, 'New message', data)
            if (data) {
                setMessages(previousMessages =>
                    GiftedChat.append(previousMessages, snapshot.val()),
                )
            }
        });

    return () => chatRef.off('child_added', onValueChange);
}, [])

import React, { useEffect, useState, useCallback } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import firebase from '@react-native-firebase/app';
import '@react-native-firebase/database';

const ChatScreen = ({ chatRef, currentUser }) => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const messagesRef = chatRef.child('messages').orderByChild('createdAt');

        const onChildAdded = messagesRef.on('child_added', snapshot => {
            const newMessage = snapshot.val();
            if (newMessage) {
                // 将新消息添加到现有消息列表的末尾
                setMessages(previousMessages =>
                    GiftedChat.append(previousMessages, [newMessage]),
                );
            }
        });

        // 清理函数：组件卸载时移除监听器
        return () => messagesRef.off('child_added', onChildAdded);
    }, [chatRef]); // 依赖项：chatRef，确保当chatRef变化时重新订阅

    const onSend = useCallback((newMessages = []) => {
        // 假设newMessages是GiftedChat的格式，需要转换为Firebase格式并保存
        newMessages.forEach(msg => {
            const messageToSend = {
                _id: msg._id,
                text: msg.text,
                createdAt: firebase.database.ServerValue.TIMESTAMP, // 使用Firebase服务器时间戳
                user: {
                    _id: msg.user._id,
                    name: msg.user.name,
                },
            };
            chatRef.child('messages').push(messageToSend); // 添加新消息
        });
    }, [chatRef]);

    return (
        <GiftedChat
            messages={messages}
            onSend={onSend}
            user={{
                _id: currentUser.uid,
                name: currentUser.displayName,
            }}
        />
    );
};

export default ChatScreen;

import React, { useEffect, useState, useCallback } from 'react';
import { GiftedChat } from 'react-native-gifted-chat';
import firebase from '@react-native-firebase/app';
import '@react-native-firebase/database';

const ChatScreen = ({ chatRef, currentUser }) => {
    const [messages, setMessages] = useState([]);

    useEffect(() => {
        const messagesRef = chatRef.child('messages').orderByChild('createdAt');

        const onValueChange = messagesRef.on('value', snapshot => {
            const data = snapshot.val();
            if (data) {
                // 将对象转换为数组，并按createdAt排序（如果Firebase查询已排序，这里可能不需要）
                const loadedMessages = Object.values(data).sort((a, b) => b.createdAt - a.createdAt);
                setMessages(loadedMessages);
            } else {
                setMessages([]); // 没有消息时清空
            }
        });

        // 清理函数：组件卸载时移除监听器
        return () => messagesRef.off('value', onValueChange);
    }, [chatRef]);

    const onSend = useCallback((newMessages = []) => {
        newMessages.forEach(msg => {
            const messageToSend = {
                _id: msg._id,
                text: msg.text,
                createdAt: firebase.database.ServerValue.TIMESTAMP,
                user: {
                    _id: msg.user._id,
                    name: msg.user.name,
                },
            };
            chatRef.child('messages').push(messageToSend);
        });
    }, [chatRef]);

    return (
        <GiftedChat
            messages={messages}
            onSend={onSend}
            user={{
                _id: currentUser.uid,
                name: currentUser.displayName,
            }}
        />
    );
};

export default ChatScreen;