当大量文档从 Firestore 快照到达时，如何不让 ReactJS 应用程序冻结？

Posted 2023-02-22

【中文标题】当大量文档从 Firestore 快照到达时，如何不让 ReactJS 应用程序冻结？

【英文标题】：How not to make a ReactJS app freeze when a huge number of docs arrive from a Firestore snapshot?

【发布时间】：2022-01-03 14:48:43

【问题描述】：

我有一个由 3 个简单元素组成的 ReactJS 应用程序：2 个数字和一个输入文本。这当然是一个测试页面。 2 个数字是指存在于 2 个单独的 Firestore 集合中的元素的数量，输入文本没有任何作用。 我实验的目标是了解为什么我在短时间内在集合中编写大量文档（我使用k6 以便）并通过收听 Firestore 快照打印这两个数字，我的页面完全冻结，直到所有消息都到达。

这是我的代码

const App = () => 
  const [col1, setCol1] = useState(0);
  const [col2, setCol2] = useState(0);
  const [value, setValue] = useState('');
  useEffect(() => 
    console.debug('*** EFFECT');

    db
      .collection('abcd/efgh/collection1')
      .orderBy('timestamp')
      .startAt(new Date())
      .limitToLast(1)
      .onSnapshot(( docs ) => 
        setCol1((e) => e + 1);
      );

    db
      .collection('qwer/tyui/collection2')
      .orderBy('timestamp')
      .onSnapshot(( docs ) => 
        console.debug('***', docs.length);
        setCol2(docs.length);
      );
  , []);

  return (
    <>
      exist

      <br />

      messages

      <br />

      <Input onChange=( target:  value  ) => setValue(value) value=value />
    </>
  );
;

当然，最终目标是了解如何不导致冻结。 从this 我看到生成一个单独的线程会有所帮助，因此 JS 桌面中的等价物是 WebWorkers。 这可能是一个正确的想法吗？ 您还有其他建议吗？

【问题讨论】：

发表答案有用吗？

【参考方案1】：

根据我的理解，如果您只是想计算文档数，我认为快照在这里不合适。 onSnapshot() 方法主要用于实时更新用例。每次内容更改/添加/删除时，另一个调用会更新快照。因此，对于大量文档，快照会经常更新，直到一切都赶上。您可以查看此page 以了解一些常规 onSnapshot 用例。您可以限制写入速率，超过限制会导致争用和延迟issues。

如果您只是尝试进行批量写入更新，之后您想知道集合中有多少文档，那么您可以先进行更新，然后使用 get() 检索文档数而不是 onSnapshot 来不断获取更新。有很多方法可以检索文档计数，例如 get() 方法或使用计数器来跟踪计数。第三方post.