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>;
};

将输出：

这似乎很浪费，有办法避免这种情况吗？

当我需要一个reactfire钩子的结果来创建另一个（例如，从一个文档中检索数据以确定要读取的其他文档）并重复服务器调用时，这尤其成问题。

Answer 1

请参阅React的Suspense文档。特别是那部分：Approach 3: Render-as-You-Fetch (using Suspense)

Reactfire使用此机制。即使该行执行了不止一次，也不应为每个调用获取多次。 “了解”获取操作已经完成，将开始下一个获取操作的机制。

以您的情况为准，请尝试渲染组件，查看是否需要获取组件，停止渲染并在获取时显示悬念的后备。提取完成后，它会尝试渲染您的组件，并且在提取完成后，它将完全渲染。

您可以在“网络”标签中确认每个呼叫只能进行一次。

我希望我很清楚，如果我不知道的话，请随时询问更多细节。

创建reactfire挂钩时避免重复调用

1 个答案: