reactjs - 实时数据更新如何在 React js 中工作?

标签 reactjs react-hooks

假设我正在使用一个 API 并获取它的数据:

{USA:12,IND:21,NEP:90,ENG:81}

有时它的数据更改为:

{USA:2,IND:1,NEP:0,ENG:1}

等等...它的数据在不断变化,我在 React 中创建了一个表,其中显示了这些国家/地区的数据,并在每次数据发生变化时更新表的数据。

现在,我想知道表格如何在不重新加载页面或单击任何按钮的情况下实时更新数据,而是自行更新数据。

它是否每次都在监听 API,即持续进行 API 调用,并持续获取数据,当数据发生变化时更新组件或实际发生了什么?

这是在面试期间问我的一个问题,我告诉我它会不断调用 API,当数据发生变化时它会更新表格,但我不确定这是否是正确的答案……或者它实际上是如何发生的?

如果有人能提供一些我可以引用的文章或提供解释,那就太好了。

如果有人需要更多信息,请告诉我。

最佳答案

对于 React 应用程序,可以通过三种方式获取实时更新。

  • HTTP 轮询
  • 服务器端事件
  • WebSockets。

每种方法各有利弊。

  • HTTP 轮询:优点:更容易实现缺点:服务器过载。
  • 服务器端事件:优点:更易于实现适合发布/订阅模型。缺点:双向沟通很困难。
  • WebSockets:需要服务器端支持或第三方集成。

这里是关于获取 Real Time Updates 的不同方法的更多信息.

关于reactjs - 实时数据更新如何在 React js 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67757775/

相关文章:

javascript - 了解 useEffect() 行为和额外的重新渲染

CSS 无法在表单输入上设置宽度和其他属性

javascript - 使用 webpack 和 babel 运行 ReactJS 应用程序,无需服务器并打开 HTML 文件

javascript - 防止事件连续执行React

reactjs - 如何使用 React Hooks 和直接使用 DOM 的对象构建组件? (例如 OpenLayers)?)

javascript - 如何声明 useState() 初始值为 null,然后再给它一个对象值?

css - 嗨,类不适用于焦点上的输入元素

javascript - React - 使用外部 URL 时未定义 Map 函数

javascript - 为什么在初始页面加载时多次调用 React Ref 回调(作为箭头函数或内联函数)?

reactjs - React Hooks useCallback 依赖无限循环