在ReactJs中，我应该在哪里正确地进行AJAX调用？

class MyComponent extends React.Component {
  componentDidMount() {
    // 发起AJAX请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 处理返回的数据
        console.log(data);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
  }

  render() {
    // 组件的渲染逻辑
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    // 判断props是否发生变化
    if (this.props.someProp !== prevProps.someProp) {
      // 发起AJAX请求
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          // 处理返回的数据
          console.log(data);
        })
        .catch(error => {
          // 处理错误
          console.error(error);
        });
    }
  }

  render() {
    // 组件的渲染逻辑
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  componentDidMount() {
    this.fetchData();
  }

  componentWillUnmount() {
    // 取消未完成的请求
    if (this.controller) {
      this.controller.abort();
    }
  }

  fetchData() {
    // 创建一个控制器
    this.controller = new AbortController();

    // 发起AJAX请求
    fetch('https://api.example.com/data', { signal: this.controller.signal })
      .then(response => response.json())
      .then(data => {
        // 处理返回的数据
        console.log(data);
      })
      .catch(error => {
        // 处理错误
        console.error(error);
      });
  }

  render() {
    // 组件的渲染逻辑
    return (
      <div>
        {/* 组件内容 */}
      </div>
    );
  }
}