useEffect() 和 useSWRSubscription() 之间的区别

Question

我正在使用查询从 Firebase 的 Cloud Firestore 实时读取一些数据，并且

useEffect

:

import { useEffect } from 'react'

useEffect(() => {
    const q = query(
        collection('some collection'),
        where('some condition')
    )

    const unsubscribe = onSnapshot(q, qs => {
        const datas = [];
        qs.forEach((doc) => {
            datas.push(doc.data());
        });
        console.log(datas);
    })
    return () => unsubscribe && unsubscribe()
})

我最近发现了这个 SWR，被描述为用于数据获取的 React Hook。

在他们的文档中，他们展示了 这个示例，他们使用

useSWRSubscription

来订阅 Firestore 数据源。 所以我可以像这样重新创建以前的代码块：

import useSWRSubscription from 'swr/subscription'
 
const { datas } = useSWRSubscription(queryParams ? queryParams : null, (_, { next }) => {
    const q = query(
        collection('some collection'),
        where('some condition')
    )

    const unsubscribe = onSnapshot(q,
        qs => {
            next(
                null,
                qs.docs.map(doc => doc.data())
            )
        },
        err => {
            return next(err)
        }
    )
    return () => unsubscribe && unsubscribe()
}

console.log(datas)

这两个代码块有什么区别吗？

Answer 1

是的，行为有所不同。因为 useEffect 在没有 deps 数组的情况下调用，所以它的回调将与析构函数一起在任何渲染上执行。因此，任何重新渲染的组件都将连接到套接字并立即断开连接。否则，使用 SW 订阅将按预期工作，并将在套接字错误事件上断开连接。