当在多个Firebase快照中使用useEffect
重新渲染时,可以使用一个变量来跟踪当前的快照,并在useEffect
中进行比较。只有当快照发生变化时,才重新渲染。
下面是一个使用React Hooks和Firebase的示例代码:
import React, { useState, useEffect } from 'react';
import firebase from 'firebase/app';
import 'firebase/firestore';
const ExampleComponent = () => {
const [snapshot, setSnapshot] = useState(null);
useEffect(() => {
const db = firebase.firestore();
const unsubscribe = db.collection('your-collection').onSnapshot(querySnapshot => {
// 如果快照发生变化,则更新状态并重新渲染
if (JSON.stringify(querySnapshot) !== JSON.stringify(snapshot)) {
setSnapshot(querySnapshot);
}
});
// 取消订阅以避免内存泄漏
return () => unsubscribe();
}, []);
return (
{/* 使用Firebase快照进行渲染 */}
{snapshot && snapshot.docs.map(doc => (
{doc.data().name}
))}
);
};
export default ExampleComponent;
在上面的示例中,我们使用useState
来创建一个名为snapshot
的状态变量,用于存储Firebase的快照。然后,我们使用useEffect
来订阅Firebase集合的快照变化。每当快照发生变化时,我们将其与之前的快照进行比较,如果它们不相同,则更新状态并重新渲染组件。
请注意,我们在useEffect
的依赖数组中传递了一个空数组[]
,这意味着只有在组件加载时才会执行订阅逻辑。这样可以避免在每次重新渲染时重复执行订阅逻辑。