class AjaxInConstructor extends React.Component {
  constructor() {
    super();
    this.state = { name: '', age: '' };
    this.loadData().then(data => {
      this.setState(data);
    });
  }
  public loadData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({
          name: 'slideshowp2',
          age: 123
        });
      }, 2000);
    });
  }
  public render() {
    const { name, age } = this.state;
    return (
      <div>
        <p>Can I init component state async?</p>
        <p>name: {name}</p>
        <p>age: {age}</p>
      </div>
    );
  }
}

ReactDOM.render(<AjaxInConstructor />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


上面是我的演示代码。我知道人们总是将ajax放在componentDidMountcomponentWillMount生命周期中。

但是这种情况也可以。

在chrome console中,React不会引发任何错误和警告。那么,我的问题是这样的用法是完全正确的吗?有什么错误吗?

最佳答案

您可以随时随地拨打AJAX电话。在构造函数中进行AJAX调用没有任何“错误”,但是有一个陷阱。您只想在组件安装之后或即将安装之前进行AJAX调用。

因此,在渲染组件之前,建议使用componentDidMount()componentWillMount()进行AJAX调用。仅仅因为React允许做“事情”,并不意味着您应该这样做! :)

更新

我也意识到,最初我的回答并不严格。我一直盲目地跟随着其他程序员所遵循的。

经过一番搜索,我发现它们离完整答案更近了一步-
Why ajax request should be done in componentDidMount in React components?

这些答案的实质是,当您在setState()中调用componentWillMount()时,该组件将不会重新呈现。因此,必须使用componentDidMount()。进一步阅读后,我了解到它已由React团队在后续发行版中修复。您现在可以在setState()中调用componentWillMount()。我认为这就是每个人都建议使用didMount进行AJAX调用的原因。

其中一条评论也非常清楚地提出了我的想法-

09-25 17:18
查看更多