Firebase onSnapshot函数上的无限循环正常吗？

Posted 2021-04-26

当将新页面添加到Cloud Firestore数据库时，我有大量的代码侦听。基本上，它为此使用onSnapshot事件侦听器。

我使用React钩子来存储来自数据库的内容。我注意到的是，当我使用setPages(tmp_array)时，PRINT THIS一直在打印，这让我想到了无限循环，但网站丝毫没有变慢。评论setPages(tmp_array)时，它只打印了一次，正如我认为的那样。但是我确实需要将数据存储在数组中！仅供参考，此useEffect除外的页面未在其他任何地方使用，除这里以外，我不使用setPages，因此数据并非每次都是“新的”。

const [pages, setPages] = useState([]);

const eventPageListener = pagesRef.onSnapshot(snapshot => {
    console.log('PRINT THIS');
    setPages(snapshot.docChanges().filter(change => change.type === 'added').map(change => change.doc.data()));
  });

  useEffect(() => {
    if (pages.length > 0) {
      eventPageListener();
    }
  }, [pages]);

例外行为是无限循环吗？因为这是我第一次使用侦听器，所以我不太确定。如果每次都调用该网站，这最终不会减慢该网站的速度吗？我还注意到取消订阅是行不通的。我真的觉得我在这里做错了。

答案

如果您试图模拟只会调用一次的componentDidMount行为，则可以使用useEffect尝试一个空数组>

  useEffect(() => {
    if (pages.length > 0) {
      eventPageListener();
    }
  }, []); // instead of [pages]
就我而言，使用[]停止了无限循环