ReactFire / Firebase 挂钩放置

ReactFire / Firebase Hook Placement

我想知道在中型应用程序中组织 reactfire 钩子（例如 useUser 或 useFirestoreCollectionData）的好方法：

  1. 我可以将钩子放在顶级组件中，并将此信息作为道具传递给子组件（或使用 Context 来存储状态）。
  2. 我可以在需要时在每个组件中放置挂钩，所以我最终会得到多个 useUser 或 useFirestoreCollectionData 挂钩。

第二种方法解耦了一些组件，这很好，因为我们的项目正在积极开发中。

但是，与 SWR 或 react-query 等库相比，我不确定 reactfire 或 firebase 客户端库是否具有内置重复数据删除。我希望尽量减少不必要的阅读。

我喜欢在使用 Firebase 数据库时使用 offline first 方法。 None 的可用库可以满足我们的需求，因此我制作了自己的提供程序列表，其中所有的提供程序都是解耦的。主要目标是：

  • 无论应用是否在线，所有数据都可以离线使用（这也会增加用户的响应时间）
  • 为 RTDB 和 Firestore 保留实时监听器 例如，当您有一个列表并转到单个项目并返回时，您可能不想在离开该列表组件时停止侦听器并在返回时再次启动它。如果您停止并启动它，firebase SKD 将从数据库加载所有数据。

您可以找到供应商和 example app here。