reactjs - 如果我们使用 loadQuery 和 usePreloadedQuery vs loadQuery 和 useLazyLoadQuery Hook ，性能将如何影响 react 中继？

Question

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

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

Answer 1

usePreloadedQuery 在组件呈现时 发送请求，如果组件在查询返回之前就绪，则可以暂停并进入加载状态。

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

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