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

Question

在 componentDidMount 钩子(Hook)处触发 AJAX 请求的许多 React 项目中都可以看到一个常见的用例。

我只是无法理解这个建议的做法，假设我们有下面的组件，其中 AJAX 请求依赖于 parent component 和 的 prop >MyComponent 如果从它的父组件(使用新属性)触发第二个render action 发生，则不会使用正确的 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

你误解了模式。

componentDidMount 是执行异步获取的正确位置您希望在组件安装时发生。如果有一些其他操作应该触发数据获取，那么是的，在其他位置执行异步调用。

您真正想要研究的是整个 Flux 范例，它是为 React 制作的完全充实的数据流(尽管它也可以在其他地方使用)。有很多包用有用的处理程序包装了该设计模式，最流行的是 Redux。

但不，没有人建议所有异步调用都发生在该生命周期钩子(Hook)中。