为什么 componentDidMount 是触发 AJAX 请求的最佳位置

Question

在很多 React 项目中都可以看到一个常见的用例，即 AJAX 请求在componentDidMounthook 时被触发。

我只是无法理解这个建议的做法，假设我们有下面的组件，其中 AJAX 请求依赖于propfromparent component并且MyComponent如果从它的父组件触发第二个渲染操作，则不会使用正确的 ajax 数据正确更新（与新道具）发生。componentDidMount但无论如何都不会被执行

所以我认为这种做法会引起问题，有人可以帮助确认并证明其合理性吗？或者纠正我，如果我错了。

export default class MyComponent extends Component {
  constructor() {
    super(...arguments);
  }
  
  async componentDidMount() {
    const data = await fireAjax(this.props.id);
    this.setState({data});
  }

  render() {
    const { data } = this.state;
    return (
        { data && <span>{data}</span> }
    );
  }
}

Answer 1

如果您在组件挂载之前执行 AJAX 请求，则组件可能会在请求完成之前呈现，并且您仍然会遇到数据未准备好的问题。

您应该做的是在父组件中发出 AJAX 请求，请求完成后，您可以通过 props 将 AJAX 请求中的数据传递给子组件。也许显示一些东西来通知用户它正在加载。