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

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

最好在父应用程序上执行单个大型查询，以获取孩子所需的一切（然后通过道具/状态传递），或者仅将参数传递给子组件，并让每个子组件执行自己的较小查询？

最佳答案

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

范例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

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

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

此外，还有一条通用规则：对解决方案进行基准测试，比较结果并选择最佳解决方案。