Question

我是react.js的新手。我创建了一个带有react.js的网页，该网页从json文件中获取数据（文件在服务器上）并显示它。

我希望json文件中的更改应该反映在网页中而不重新加载页面，所以我使用了以下代码：

（这不是完整代码）

 getInitialState: function() {
    return {data: []};
  },
   componentDidMount: function() {
        this.loadFromServer();
        setInterval(this.loadFromServer, 2000);
      }

和loadFromServer（）：

loadFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  }

效果很好。

但我面临的问题是，即使数据没有变化，它也会每2秒继续获取json文件数据。

请参阅：

此处文件大小仅为8.28 KB，但将来会增加。我想要一个解决方案，它应该只在数据发生变化时从服务器上的JSON文件中获取数据。我正在使用Nodejs（express）实现服务器。

Answer 1

ajax调用完成后，客户端（浏览器）无法在不询问服务器的情况下知道服务器端的内容。

有许多方法可以避免系统地获取巨大的json有效载荷：

请求json diff - cf https://www.npmjs.com/package/jiff例如，但您需要跟踪每个客户的版本
在获取json有效负载之前询问是否有新数据可用 - 您需要为json有效负载提供ID以将客户端ID与服务器端ID进行比较;或者您可以为json添加时间戳并使用时间戳作为ID，以便服务器知道客户端具有陈旧数据
选择一个像socket.io这样的实时框架，以便服务器能够通知客户新数据已经到达
使用基于HTTP 304的解决方案
可能还有更多

Answer 2

您必须使用setTimeout

setTimeout(this.loadFromServer, 2000);

因为setInterval将每2秒调用一次。但是setTimeout将在2秒后触发

编辑： - 如果要在服务器上更新组件以进行某些数据更改，则@jerome建议使用socket.io并在组件中注册回调

使用ReactJS和AJAX更新页面内容

2 个答案: