javascript - 对父组件进行大型查询还是对每个子组件进行一系列小查询？

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

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

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

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