React Native 在具有依赖关系的useEffect中设置Firestore onSnapshot侦听器会导致多个订阅吗?

wkftcu5l  于 2022-12-24  发布在  React
关注(0)|答案(1)|浏览(135)

我在一些组件中使用了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.sortOptionprops.filterTag的更改是否会导致创建新订阅,而不首先调用旧的取消订阅?

xkrw2x1b

xkrw2x1b1#

是的,如果您在具有依赖项的useEffect中设置Firestore onSnapshot侦听器,并且依赖项发生更改,则会导致创建新订阅并取消订阅旧订阅,因为[props.sortOption, props.filterTag]更改时useEffect将再次重新呈现。
为了解决这个问题,我认为你可以实现一个本地缓存解决方案,这样就不会有不必要的快照被创建为观察你的代码,它看起来像你只是排序和过滤集合。
您可以使用firestore的缓存功能,仅在firestore数据库中发生任何更改时创建快照。有关详细信息,请遵循此documentations

相关问题