javascript - firestore.onSnapshot回调函数阻止了渲染过程

我正在使用Firestore的onSnapshot（）方法来收听约5,000个文档的集合。在传递给onSnapshot的回调中，我将进行捕捉并将文档格式化为数组和对象。

db.onSnapshot(snap => {
      const list = [];
        const ref = {};
        for (let i = 0, size = snap.size; i < size; i++) {
          const doc = snap.docs[i];
          const id = doc.id;
          const data = doc.data();
          list.push(data);
          ref[id] = { ...data };
        }
    // Save list and ref to redux store.
  }

对于较小的馆藏，此过程一直运行良好。但是，现在有了这个较大的集合，当用户向集合提交新文档时，for循环会阻止用户看到的“成功”提示。

详细说明：当用户提交新文档时，将调用db.add(newDocument)。在.then()中，我们重新渲染页面以向用户显示确认消息。但是，与此同时，快照侦听器已检测到集合中的更改，现在再次遍历所有5,000个文档。这仅需要一两秒钟，但会为用户带来明显的“滞后”。

该过程应如何处理？

最佳答案

您可能应该：


只要监听器保持连接状态，就保留ref的值-请勿每次都重新创建它。
迭代snap.docChanges，因此您只需要处理将导致先前的ref内容发生更改的那些更改。这将在更改的type中指示。


每次发生更改时，这将大大减少正在创建和销毁的对象的数量。

关于javascript - firestore.onSnapshot回调函数阻止了渲染过程，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57318327/