Reactjs react应用中的实时负载数据

我正在开发React应用程序
我需要在我的应用程序中开发一个仪表板。
对于该仪表板，我需要实时显示数据。
我是新手，正确的方法是什么？

对于实时数据，可以使用HTTP轮询、HTTP流、服务器发送的事件、web套接字。但高效的实时数据是WebSockets。对于react和node，可以使用包

下面是一个示例客户机代码

import React, { Component } from 'react';
import { w3cwebsocket as W3CWebSocket } from "websocket";

const client = new W3CWebSocket('ws://127.0.0.1:8000');

class App extends Component {
  componentWillMount() {
    client.onopen = () => {
      console.log('WebSocket Client Connected');
    };
    client.onmessage = (message) => {
      console.log(message);
    };
  }

  render() {
    return (
      <div>
        Sample code for WebSockets.
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“websocket”导入{w3cwebsocket作为w3cwebsocket}；
const client=neww3cwebsocket（'ws://127.0.0.1:8000'）；
类应用程序扩展组件{
组件willmount（）{
client.onopen=（）=>{
log（'WebSocket客户端已连接'）；
};
client.onmessage=（message）=>{
控制台日志（消息）；
};
}
render（）{
返回(
WebSocket的示例代码。
);
}
}
导出默认应用程序；

---

一旦服务器接受请求，我们就会看到浏览器控制台上连接了WebSocket客户端。

我想重要的是要强调React是一个库，而不是一个框架。这个库的域是一个渲染（视图）

您要问的主要是业务逻辑和所谓的状态管理

有几种方法可以管理web应用程序中的数据

第一层是连接层-如何获取数据。这里实际上有两个长轮询选项—定期请求端点和WebSocket。第一个在实现上要简单得多，如果没有太多的客户机需要立即更新，那么它非常适合，第二个则不然

---

接下来是如何管理状态和更新视图。对于简单的应用程序，您可以使用React的API通过useEffect钩子来处理这个问题。最好调查Redux+Redux saga/RxJS或Mobx，不仅仅是React，最好使用WebSocket进行实时数据更新，而不是一直拉