React Query最佳实践：父组件单次useQuery还是子组件各调用一次？

结论：方案2（在ChildA和ChildB中分别调用useQuery）是更符合惯用写法的选择，原因如下：

• 遵循Hooks「就近获取数据」的原则：数据的直接使用者是ChildA和ChildB，在组件内部调用useQuery，能让组件保持独立自治，不需要依赖父组件通过props传递数据，减少组件间的耦合度。
• 充分利用React Query的缓存机制：既然useQuery会对相同查询key的请求做缓存，两次调用不会发起重复网络请求，只会读取缓存数据，完全不存在性能浪费。反而每个组件能自主管理自身的加载、错误状态，不需要父组件统一处理后传递，逻辑更清晰。
• 提升组件复用性：如果ChildA或ChildB需要在其他父组件中单独使用，不需要依赖新的父组件提供该资源的props，直接就能独立工作，复用性更强。
• 贴合React Query的设计理念：React Query的核心目标就是让组件能自主获取、管理远程数据，减少不必要的状态提升。将数据获取逻辑放在消费组件内，能更好地利用React Query的缓存刷新、数据失效、后台重新获取等特性，甚至每个组件还能根据自身需求单独配置useQuery的参数（比如自定义refetch时机），灵活性更高。

反观方案1，虽然只调用了一次useQuery，但会额外增加父组件的职责——父组件既要处理自身逻辑，还要负责子组件的数据获取与传递，违背了「单一职责」原则。后续如果子组件数量增加或需求变更，父组件的props传递逻辑会变得繁琐，维护成本上升。

内容的提问来源于stack exchange，提问作者Daniel Porteous