Javascript 使用render进行意外的无限循环

我使用React实现了Include组件。它从url加载内容。 此测试工作正常，但也会生成一个意外的带有渲染的无限循环。。。为什么?

<script type="text/jsx">
  /** @jsx React.DOM */
  var Include = React.createClass({
    getInitialState: function() {
      return {content: 'loading...'};
    },
    render: function() {
      var url = this.props.src;
      $.ajax({
        url: url,
        success: function(data) {
          this.setState({content: data});
        }.bind(this)
      });
      return <div>{this.state.content + new Date().getTime()}</div>;
    }
  });

  var Hello = React.createClass({
    render: function() {
        return <Include src="hello.txt" />;
    }
  });
  React.renderComponent(
    <Hello />,
    document.getElementById('hello')
  );
</script>

/**@jsx React.DOM*/
var Include=React.createClass({
getInitialState:函数（）{
返回{content:'loading…'}；
},
render:function（）{
var url=this.props.src；
$.ajax({
url:url，
成功：功能（数据）{
this.setState（{content:data}）；
}.绑定（此）
});
返回{this.state.content+new Date（）.getTime（）}；
}
});
var Hello=React.createClass({
render:function（）{
返回；
}
});
React.renderComponent(
,
document.getElementById（'hello'）
);

我意识到渲染执行了很多次，所以对于我的ajax调用（-\u-）来说不是更好的地方

这样做很好：

<script type="text/jsx">
  /** @jsx React.DOM */
  var Include = React.createClass({
    getInitialState: function() {
      var url = this.props.src;
      $.ajax({
        url: url,
        success: function(data) {
          this.setState({content: data});
        }.bind(this)
      });
      return {content: 'loading...'};
    },
    render: function() {
      return <div>{this.state.content + new Date().getTime()}</div>;
    }
  });

  var Hello = React.createClass({
    render: function() {
        return <Include src="hello.txt" />;
    }
  });
  React.renderComponent(
    <Hello />,
    document.getElementById('hello')
  );
</script>

/**@jsx React.DOM*/
var Include=React.createClass({
getInitialState:函数（）{
var url=this.props.src；
$.ajax({
url:url，
成功：功能（数据）{
this.setState（{content:data}）；
}.绑定（此）
});
返回{content:'loading…'}；
},
render:function（）{
返回{this.state.content+new Date（）.getTime（）}；
}
});
var Hello=React.createClass({
render:function（）{
返回；
}
});
React.renderComponent(
,
document.getElementById（'hello'）
);

---

谢谢你的阅读

这是一个更可靠的包含组件。差异,

• 渲染应该是纯的（不能在那里使用ajax）
• getInitialState应该是纯的
• 如果道具是动态的，例如
  ，则应更新道具

var Include=React.createClass({
getInitialState:函数（）{
返回{content:'loading…'}；
},
componentDidMount:函数（）{
this.updateAJAX（this.props.url）；
},
组件将接收道具：函数（下一步）{
//看看它是否真的改变了
if（nextrops.url！==this.props.url）{
//再次显示加载
this.setState（this.getInitialState）；
this.updateAJAX（nextrops.url）；
}
},
updateAJAX:函数（url）{
$.ajax({
url:url，
成功：功能（数据）{
this.setState（{content:data}）；
}.绑定（此）
});
},
render:function（）{
返回{this.state.content}；
}
});
var Hello=React.createClass({
render:function（）{
返回；
}
});

很高兴看到你解决了这个问题！我推荐的一个小建议是将ajax调用移动到componentWillMount方法中。结果相同，但使用componentWillMount方法可以更好地分离关注点。我附上了一把小提琴，你可以理解我的意思。另外，React非常棒这里是@user3508122，我相信componentDidMount是正确的。它被用在汽车上。我能想到的唯一原因是，当使用

renderComponentToString

（即服务器渲染）时，会调用componentWillMount。@FakeRainBrigand-很好！你是对的，我错了。