使用ReactJS和AJAX更新页面内容

我是新的react.js。 我用react.js创build了一个网页，从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，但将来会增加。 我想要一个解决scheme，它应该从服务器的JSON文件中提取数据只有当数据发生变化。 我使用Nodejs（express）实现服务器。

Answer 1

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

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

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

Answer 2

你必须使用setTimeout

 setTimeout(this.loadFromServer, 2000); 

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

编辑： –如果你想更新组件在服务器上的一些数据更改，作为@jeromebuild议使用socket.io和组件注册callback