React Firebase更新组件，无需刷新

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

const MyComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 连接到Firebase实时数据库
    const firebaseConfig = {
      // Firebase配置信息
    };
    firebase.initializeApp(firebaseConfig);

    // 监听数据变化
    const database = firebase.database();
    const dataRef = database.ref('data');
    dataRef.on('value', (snapshot) => {
      // 数据变化时更新组件状态
      setData(snapshot.val());
    });

    // 清除监听器
    return () => {
      dataRef.off();
    };
  }, []);

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
};

export default MyComponent;