react应用程序中的实时加载数据

Question

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

Answer 1

对于实时数据，您可以使用HTTP轮询、HTTP流、服务器发送的事件、web套接字。但高效的实时数据是WebSockets。对于react和节点，可以使用https://www.npmjs.com/package/websocket包裹

这是一个示例客户端代码

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;

一旦服务器接受请求，我们就会在浏览器控制台上看到WebSocket Client Connected。

Answer 2

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

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

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

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

接下来是如何管理状态和更新视图。对于简单的应用程序，您可以使用React的API使用useEffect钩子来处理此问题https://reactjs.org/docs/hooks-effect.html#example-使用-hooks-1对于大的事情，最好调查Redux+Rdux传奇/RxJS或Mobx