我在一些组件中使用了onSnapshot
,我知道我可以在useEffect
中返回unsubscribe
函数,当组件卸载时,它将为我处理取消订阅,我不必担心它。
但在我当前的用例中,useEffect没有任何依赖关系,它只是:
useEffect(() => {
const unsubscribe = db.collection(collectionName).doc(docId).onSnapshot(onNext, onError);
return unsubscribe;
}, []);
现在我有一个例子,我做了一个更复杂的查询来返回一个排序和过滤的列表,我想订阅对数据库的更改,但也需要在排序/过滤参数更改时更新查询。
通常我会使用如下的useEffect:
useEffect(() => {
const unsubscribe = db.collection( ... ).where(...sortOption something...).onSnapshot(...);
return unsubscribe;
}, [props.sortOption, props.filterTag]);
但是在这种情况下,对props.sortOption
或props.filterTag
的更改是否会导致创建新订阅,而不首先调用旧的取消订阅?
1条答案
按热度按时间xkrw2x1b1#
是的,如果您在具有依赖项的useEffect中设置Firestore onSnapshot侦听器,并且依赖项发生更改,则会导致创建新订阅并取消订阅旧订阅,因为
[props.sortOption, props.filterTag]
更改时useEffect将再次重新呈现。为了解决这个问题,我认为你可以实现一个本地缓存解决方案,这样就不会有不必要的快照被创建为观察你的代码,它看起来像你只是排序和过滤集合。
您可以使用firestore的缓存功能,仅在firestore数据库中发生任何更改时创建快照。有关详细信息,请遵循此documentations