在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);

但不是這些的混合。