如果我们使用 loadQuery 和 usePreloadedQuery vs loadQuery 和 useLazyLoadQuery 挂钩，性能将如何影响反应中继？

Question

1. loadQuery 和 usePreloadedQuery - 这种组合实际上是高性能的，因为我们在 usePreloadedQuery 挂钩中使用 loadQuery 返回的引用，因此这遵循“获取时呈现”模式。
2. loadQuery 和 useLazyLoadQuery - 如果我们使用这个组合，那么它也会提供与第一个组合相同的性能。 根据文档，我们应该使用带有 loadQuery 的 usePreloadedQuery 查询挂钩。 当我们将 LazyLoadQuery 与 loadQuery 一起使用时，它不会进行额外的 API 调用，因为它使用我们从 loadQuery 获取的相同数据。

那么实际上这两种方式是相同的还是不同的？ 就良好的架构而言，首选方式应该是什么？为什么？

Answer 1

usePreloadedQuery在组件呈现时发送请求，如果组件在查询返回之前准备就绪，则可以挂起加载 state。

另一方面， useLazyLoadQuery在组件呈现后发送请求。

因为 API 请求通常比 React 渲染花费的时间更长，所以最好尽早开始获取。 将预取与React.Suspense一起使用还可以改善用户体验，因为在填充数据之前，他们不会看到组件呈现任何内容或空的初始 state。