Reactjs 如何在多个组件中高效地查询相同的Firestore数据？

假设在我的应用程序中，几个组件从Firestore获取相同的数据：它们使用相同的过滤器和限制获取相同集合的文档

该应用程序有3个页面，其中2个呈现需要firestore数据的组件（红色节点：AA和D）。第2页不需要以下数据：

如果我在AA和D中复制

query.onSnapshot

，Firestore JS SDK是保存全局缓存还是两次获取数据？
即使只使用了Page2，我是否应该以加载数据为代价将查询放在第一个常用的ancester（即路由器）中？
实现这一点的最佳方式是什么

编辑：精度 我知道我们可以在第一个公共祖先中获取数据，并使用prop drilling、redux或React.Context将其传递下去。这不是我问题的重点。

---

我在获取Firestore数据的上下文中特别询问：由于存在缓存（用于脱机或缓存第一次查询），是否有一种技巧允许仅在需要时查询数据，并且只有一次？

您可以在路由器中创建一个空的数据状态，并在路由器中的函数中写入一个逻辑来获取数据，在获取之后，该函数将更新状态中的数据

//在router.js中
const[data，setData]=useState（null）
常量fetchData=（）=>{
常量apiResponse=getResponseFromAPI（）
设置数据（apiResponse）
}

将此状态和功能作为道具传递给AA和D组件

在AA和D的使用效果中，检查是否存在数据，然后不要调用该函数

//在AA组件中
useffect（（）=>{
如果（！数据）{
fetchData（）
}
},[])

---

通过这种方式，您将仅在必要时获取数据，并且仅获取一次

如果您在应用程序中使用redux，您可以将数据存储在reducer中，并在任何需要的地方使用它。根据定义，这是React上下文的理想用例，您可以使用上下文在app.tsx中一次性获取数据，并将其设置在那里。然后，您的每个子组件都可以使用类似“``的东西来访问数据谢谢您的回答，事实上，我们可以使用redux从顶部向下传递Abhi的数据，或者使用React.Context来访问diego92sigma6或prop drilling，但这不是我问题的重点。我补充了这个精确性。谢谢你的回答，这是我试图实现的一个粗糙的方式。但是我们需要注意数据竞争：如果AA开始抓取，那么D会在AA完成抓取之前装载？我们需要管理“查询”、“成功”、“错误”状态。我在问是否有更好的方法使用Firestore SDK。