React js 中的实时数据更新是如何工作的？

Question

假设我正在使用一个 API 并获取其数据：

\n

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

\n

有时数据更改为：

\n

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

\n

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

\n

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

\n

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

\n

这是面试期间向我提出的一个问题，我告诉它它正在不断调用 API，当数据更改时它会更新表，但我不确定这是否是正确的答案 \xe2\x80\xa6 或者它实际上是如何的发生？

\n

如果有人能给我提供一些我可以参考的文章或为我提供解释，那就太好了。

\n

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

\n

Answer 1

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

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

每种方法都有优点和缺点。

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

以下是有关获取实时更新的不同方法的更多信息。

Answer 2

问题可能是评估您是否知道 React 的虚拟 DOM 模型是如何工作的。

当下载新数据时（从fetch或回调xmlhttprequest），setState可能会在组件上调用一个调用（或等效的钩子函数） - 传递 json 。

然后 React 将调用组件的 render 方法（或者只调用纯组件的函数）。该渲染函数将引用状态以返回元素树。这反过来会导致 React 更新其虚拟 DOM，计算与之前版本的差异，并将这些差异应用于浏览器的实际 HTML DOM。如果自上次渲染以来 DOM 没有发生实际更改，则不会对浏览器 DOM 进行实际更新。我可能缺少一些优化和细节，但这正是我在面试中寻找的。

一些对此有用的链接。

虚拟 DOM 和内部结构

和解