Question

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>

以上是我的演示代码。我知道人们总是在componentDidMount或componentWillMount生命周期中放置ajax。

但这种情况也有效。

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

Answer 1

您可以随时随地进行AJAX调用。没有什么＆＃34;错误＆＃34;在构造函数中进行AJAX调用，但有一个问题。您只想在安装组件之后或即将安装组件之前进行AJAX调用。

因此，在呈现组件之前，建议在componentDidMount()或componentWillMount()中进行AJAX调用。只是因为React允许做＆＃34;事情＆＃34;并不代表你应该！：）

<强>更新

我也意识到，最初我的回答并不严谨。我一直跟着程序员一直跟着，盲目地跟着。

经过搜索后，我发现这些距离完全答案更近了一步 - Why ajax request should be done in componentDidMount in React components?

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

其中一条评论也非常明确地阐述了我的想法 -

好吧，你也没有从componentWillMount调用setState componentDidMount直接，但来自新的异步堆栈。我不知道如何实现反应以保持对live的引用来自各种方法的事件监听器。如果使用未记录的功能对你来说并不可怕，并希望它有点兴奋工作，甚至可能在未来的版本，然后感到自由，我不知道它是否会破裂

我可以在反应组件构造函数中放置ajax吗？

1 个答案: