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

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还可以改善用户体验，因为在填充数据之前，他们不会看到组件没有渲染任何内容或初始状态为空。