javascript - 我可以将 ajax 放在 React 组件构造函数中吗？

Question

import React from 'react';

class AjaxInConstructor extends React.Component {
  constructor() {
    super();
    this.state = { name: '', age: '' };
    this.loadData().then((data) => {
      this.setState(data);
    });
  }
  // simulate the AJAX (network I/O)
  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);

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

但这种情况也适用。

在 chrome console 中，React 没有抛出任何错误和警告。所以，我的问题是这样的用法是完全正确的吗？有什么错误吗？

Answer 1

您可以随时随地进行 AJAX 调用。在构造函数中进行 AJAX 调用没有任何“错误”，但有一个问题。您将希望仅在组件已安装之后或即将安装之前进行 AJAX 调用。

因此，在呈现组件之前，建议在 componentDidMount() 或 componentWillMount() 中进行 AJAX 调用。仅仅因为 React 允许做“事情”并不意味着你应该! :)

更新

我也意识到最初我的回答并不严谨。我总是盲目地追随其他程序员所追随的。

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

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

其中一条评论也很明确的提出了我的想法——

well, you are not calling setState from componentWillMount nor componentDidMount directly, but from a new async stack. I have no idea how exactly react is implemented to keep reference to this with live event listeners from various methods. if using undocumented features is not scary enough for you and want a bit of excitement that it might work and maybe even in future versions, then feel free, I don't know whether it will break or not