对父组件的大查询还是对每个子组件的一系列小查询？

Question

希望不言自明。我正在构建一个 React/Apollo 应用程序，我想确保我使用的是最佳实践。

是在父应用程序上执行单个大型查询以获取子项所需的一切（然后通过 props/state 传递）还是仅将参数传递给子组件并让每个子项更好组件执行它自己的较小查询？

Answer 1

取决于您是否需要在应用初始化时渲染所有子项。

示例 1：

parent -- page A (data 1) -> visible at initialisation
       -- page B (data 2) -> not visible at initialisation
       -- page C (data 3) -> not visible at initialisation

在这种情况下，只获取页面 A 的数据（在页面 A）。

示例 2：

parent -- element A (data 1) -> visible at initialisation
       -- element B (data 2) -> visible at initialisation
       -- element C (data 3) -> visible at initialisation

在这种情况下，获取所有内容（在父级中）。

如果您需要获取所有内容，最好有一个大请求。只要确保您的应用程序的后端能够以良好的性能正确处理它即可。有时，发出第一个简单请求以开始向您的用户显示某些内容，然后发出第二次请求以在后端更难计算的内容可能会更好。

此外，一般规则是：对您的解决方案进行基准测试，比较结果并选择最佳方案。

对父组件的大查询还是对每个子组件的一系列小查询？

A large query on the parent component or a series of small queries on each children?

javascript

web-applications

reactjs

graphql

react-apollo