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

Question

I am new to React.js and I love it. However, I am new to data-binding. So I picked a JSON data endpoint from jsontest.com to see if UI re-renders when the data changes. But I am confused because it doesn't.

http://www.jsontest.com/#date provides time and date in JSON format which obviously updates every second but my UI is still the same.

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')
);

Now my question is, if I have change the state every second using setInterval whats the point of [data changes -> state updates -> UI re-renders] concept? Perhaps I am expecting this work as webSockets so I could be wrong.

Can anyone please explain?

Answer 1

Vinon, in order to establish a "real time" connection with a server, we would need to use a more advanced solution, eg web sockets. We can't achieve this with a simple AJAX request which delivers just a one-time data fetch from the server. What we need is a persistent connection between the client and the server so that both parties can start exchanging data in any direction at any time.

Here you can find a good summary: https://blog.pusher.com/making-reactjs-realtime-with-websockets/