Question

我是React.js的新手，我喜欢它。但是，我是数据绑定的新手。所以我从jsontest.com选择了一个JSON数据端点，看看当数据发生变化时UI是否会重新渲染。但我很困惑，因为它没有。

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

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更改状态，那么[数据更改 - >＆gt;状态更新 - ＆gt; UI重新渲染]概念？也许我期待这项工作作为webSockets，所以我可能是错的。

有人可以解释一下吗？

Answer 1

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

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

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

1 个答案: