如果我们使用 loadQuery 和 usePreloadedQuery 与 loadQuery 和 useLazyLoadQuery 挂钩，性能会对 React Relay 产生怎样的影响？

Question

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

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

Answer 1

usePreloadedQuery在组件渲染时发送请求，如果组件在查询返回之前准备就绪，则可以挂起并处于加载状态。

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

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