使用 ReactJS 和 AJAX 更新页面内容答案

【问题标题】：Updating page content using ReactJS and AJAX使用 ReactJS 和 AJAX 更新页面内容
【发布时间】：2016-04-14 04:42:34
【问题描述】：

我是 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) 实现服务器。

【问题讨论】：

我认为 setInterval(this.loadFromServer, 2000);是每 2 秒调用一次服务的原因
是的，我这样做是为了不断地从服务器获取文件。但我想要一个条件来限制这种获取。我希望它只在服务器上的 json 文件发生一些变化时才获取文件。
那么我认为在服务器通过诸如socket.io之类的方式通知客户端更改之前是没有办法的。否则，您可以创建一个小服务，每 2 秒连续 ping 服务器一次，并根据响应尝试调用实际服务，而不是每次都调用它并重新绘制客户端，这是一项繁重的任务。

标签： json ajax node.js reactjs

【解决方案1】：

一旦ajax调用完成，客户端（浏览器）不询问服务器就无法知道服务器端发生了什么。

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

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

【讨论】：

我搜索了 socket.io 。我还找到了 socketcluster.io，哪个最适合解决我的问题。有什么猜测吗？？

【解决方案2】：

你必须使用 setTimeout

setTimeout(this.loadFromServer, 2000);

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

编辑：-如果您想更新组件以更改服务器上的某些数据，正如@jerome 建议的那样，使用socket.io 并在组件中注册回调

【讨论】：

使用 setTimeout json 在第一次检索后永远不会更新，这不是 OP 想要的
@JeromeWAGNER：哦，我没看到那条评论