在React中使用Firebase时， getAuth getStorage getFirestore 等应该被调用一次并传递，还是可以在每个组件中调用？

Question

如果我需要在多个组件中使用 const db = getFirestore() 或 const auth = getAuth(app) 等的结果，我应该：

1. 每当我需要时，在每个组件中重写这些行 const db = getFirestore() 或 const auth = getAuth(app) 等，或者

2. 在 App 组件的顶层仅调用它们，然后将它们作为 props 传递给子组件，以避免多次调用？

我觉得选项 1 更容易编码，但可能会导致性能损失。在 React/Firebase 编码中执行此操作的正确方法是什么？

Answer 1

getFirestore(...)、getAuth(...) 和类似的调用都是简单的本地调用，它们从配置中初始化一些基本对象。在多个地方调用它们并没有什么坏处。

也就是说，我建议将 app 传递给所有这些人，或者不传递给任何人，这与您问题中的代码现在所做的不同。

因此，要么从默认应用程序获取所有服务：

const db = getFirestore();
const auth = getAuth();

或从指定应用获取所有内容：

const db = getFirestore(app);
const auth = getAuth(app);

但不是这些的混合。