javascript - React.js JSON 数据更新，但状态不更新，因此 UI 不更新

Question

我是 React.js 的新手，我喜欢它。但是，我对数据绑定(bind)很陌生。因此，我从 jsontest.com 选择了一个 JSON 数据端点，以查看数据更改时 UI 是否重新呈现。但我很困惑，因为事实并非如此。

http://www.jsontest.com/#date提供 JSON 格式的时间和日期，显然每秒都会更新，但我的 UI 仍然相同。

const App = React.createClass({

  // Initial time to be empty string
  getInitialState: function () {
    return {
      time: ""
    }
  },

  componentDidMount: function() {
    $.ajax({
       url: this.props.url,
       dataType: 'json',
       cache: false,
       success: function(data) {
         // Setting the state to the response received from JSON endpoint
         this.setState({time: data.time});
         console.log(this.state);
       }.bind(this),
       error: function(xhr, status, err) {
         console.error(this.props.url, status, err.toString());
       }.bind(this)
     });
  },


  render: function() {
    return (
      <div>{this.state.time}</div>
    );
  }
});


ReactDOM.render(
  <App url={"http://date.jsontest.com/"} />,
  document.getElementById('content')
);

现在我的问题是，如果我使用 setInterval 每秒更改状态，那么 [数据更改 -> 状态更新 -> UI 重新渲染] 概念有何意义？也许我期望它作为 webSockets 工作，所以我可能是错的。

谁能解释一下吗？

Answer 1

Vinon，为了与服务器建立“实时”连接，我们需要使用更高级的解决方案，例如网络套接字。我们无法通过仅从服务器获取一次性数据的简单 AJAX 请求来实现这一点。我们需要的是客户端和服务器之间的持久连接，以便双方可以随时开始在任何方向交换数据。

在这里您可以找到一个很好的摘要:https://blog.pusher.com/making-reactjs-realtime-with-websockets/