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

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>

以上是我的演示代码.我知道人们总是把ajax componentDidMount或componentWillMount生命周期.

但这种情况也有效.

在chrome中console,React不会抛出任何错误和警告.那么,我的问题是这样的用法是完全正确的吗？有错误吗？

Answer 1

您可以在任何地方进行AJAX调用.在构造函数中进行AJAX调用没有"错误",但有一个问题.您只想在安装组件之后或即将安装组件之前进行AJAX调用.

所以,前组件呈现,在制造一个AJAX调用componentDidMount()或componentWillMount()建议.仅仅因为React允许做"事情"并不意味着你应该做到!:)

UPDATE

我也意识到,最初我的答案并不严谨.我一直跟随程序员一直跟随的,盲目地.

在搜索了一下之后,我发现这些更接近完整答案 - 为什么ajax请求应该在React组件中的componentDidMount中完成？

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

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

好吧,您不是直接从componentWillMount调用setState,也不是直接调用componentDidMount,而是从新的异步堆栈调用.我不知道如何通过各种方法的实时事件监听器来实现对此的确切反应.如果使用未记录的功能对你来说不够可怕并且想要它可能有用甚至在将来的版本中有点兴奋,那么请随意,我不知道它是否会破坏