swr vs axios 与 setInterval 用于大型 json 数据和 React 中的高频率

Posted 2023-02-22

【中文标题】swr vs axios 与 setInterval 用于大型 json 数据和 React 中的高频率

【英文标题】：swr vs axios with setInterval for large json data and high frequency in React

【发布时间】：2021-03-17 20:25:21

【问题描述】：

我正在尝试构建一个包含大量 json 数据并每 7 秒发送一次获取请求的应用程序。因此，数据大小和频率都很高。我应该使用swr 还是axios with react hooks and setinterval。我正在使用 ag-grid 和 react-vis 图表来显示数据。

每页有 12 个表格，30-100 行。我担心性能问题。

我是新来的反应。我需要一些建议来决定图书馆。

【问题讨论】：

我对@9​​87654323@ 不熟悉，但从快速阅读来看，它似乎针对这种情况进行了优化，那么为什么更喜欢手动呢？你担心的是，它可能不会是最快的应用程序。虽然有优化的空间（wsr 可能会做一些），例如只发送差异，而不是所有数据，如果你有时间处理它。

感谢@MoshFeu。有没有其他方法可以通过 React 优化此类应用程序？

你可以尝试使用 websockets，所以如果服务器没有任何变化，客户端不会做任何事情。另外，不要一次更新所有的 UI（所以每 3.5 秒只有一半的屏幕会改变）

@MoshFeu 谢谢。但后端不使用 websockets，所以这是替代方案。我正在考虑使用角度而不是反应，不确定角度是否会提供更好的性能。

【参考方案1】：

SWR 库不仅仅是轮询。它的主要功能之一是提供缓存失效策略。另外，请求去重、指数回避策略重试，这些功能都是开箱即用的，不建议自己实现。

SWR 先从缓存中返回数据（stale），然后发送 fetch 请求（revalidate），最后再次带上最新数据。

它将为您提供类似 WebSocket 的实时体验。性能问题涉及很多方面，使用WebSocket不一定能得到好的性能，可以试试SWR

更多功能见features和performance