在创建reactfire钩子时避免重复调用

Question

当使用reactfire初始化一个组件时，每次我添加一个reactfire钩子(例如useFirestoreDocData)时，它都会触发一个重新渲染，因此会重复之前的所有初始化。例如：

const MyComponent = props => {
  console.log(1);
  const firestore = useFirestore();
  console.log(2);
  const ref = firestore.doc('count/counter');
  console.log(3);
  const { value } = useFirestoreDocDataOnce(ref);
  console.log(4);
  ...
  return <span>{value}</span>;
};

将输出：

1
1
2
3
1
2
3
4

这看起来很浪费，有没有办法避免呢？

当我需要一个reactfire挂钩的结果来创建另一个reactfire挂钩(例如，从一个文档中检索数据以确定要读取哪个其他文档)，并且它复制服务器调用时，这是特别有问题的。

Answer 1

请参阅React的悬念文档。具体部分：Approach 3: Render-as-You-Fetch (using Suspense)

Reactfire使用这种机制。即使该行被多次执行，它也不应该为每个调用提取多次。fetch背后的机制“理解”fetch已经完成，并将开始下一次。

在你的例子中，react尝试渲染你的组件，查看它需要获取，停止渲染，并在获取时显示suspense的回退。当fetch完成时，它会重试渲染你的组件，当fetch完成时，它将完全渲染。

您可以在网络选项卡中确认每个呼叫只进行一次。

我希望我说得很清楚，如果我不清楚，请不要犹豫，询问更多细节。