Reactjs 中的套接字、长轮询和异步

Question

我正在构建一个应用程序，它将连接到 api 端点，returns 以下内容：

[
  {batchName: "wqrs1", totalJobs: X1, numErrJobs: Y1, numCmpltJobs: Z1, inFlightJobs: K1},
  {batchName: "wqrs2", totalJobs: X2, numErrJobs: Y2, numCmpltJobs: Z2, inFlightJobs: K2},
  {batchName: "wqrsN", totalJobs: XN, numErrJobs: YN, numCmpltJobs: ZN, inFlightJobs: KN},
]

从 api 端点 /get-all-batches 使用 Reactjs（我是新手）在仪表板中显示。我想了解的是当值 X、Y、Z、K 之一发生变化时如何更新我的反应存储/状态。有人可以区分套接字、长轮询或 async/await 吗？这是我应该做这种事情的原因吗？

Answer 1

您可以参考这个（答案和post）：。答案包含对您开始使用 React 有帮助的见解。

最重要的部分是 setState 调用，一旦 .on("value".. 触发。

export default ...... extends Component {
  constructor() {
    this.state = {
      currentToken: 'first value'
    }
  }

  componentDidMount() {
      var that = this;
      var updateDb = firebase.database().ref("currentToken");
      updateDb.on("value", function(snapshot) {
          that.setState({ currentToken: snapshot.val() });
      });
  }

那 (setState) 会告诉组件重新渲染，所以如果你有下面的代码，你会首先看到 first value，当 firebase 触发时，你会为你重新渲染新值通过反应：

render() {
  return <div>{this.state.currentToken}</div>
}

Reactjs 中的套接字、长轮询和异步

Sockets, long polling, and async in Reactjs

sockets

polling

reactjs