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

How performance will impact with react relay if we use loadQuery and usePreloadedQuery vs loadQuery and useLazyLoadQuery hook?

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

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

usePreloadedQuery 组件正在渲染时发送请求,如果组件在查询 returns 之前准备就绪,则可以挂起加载状态。

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

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