javascript - firestore.onSnapshot 回调函数正在阻塞渲染进程

Question

我正在使用 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 个文档。这只需要一两秒，但会给用户带来明显的“滞后”。

这个过程应该如何处理？

Answer 1

你可能应该:

• 只要监听器保持附加状态，就保留 ref 的值 - 不要每次都重新创建它。
• 迭代snap.docChanges因此您只需处理那些会导致您之前的 ref 内容发生更改的更改。这将在type中指出。的变化。

这应该会大大减少每次发生变化时创建和销毁的对象数量。