如何在React中缓存jQuery ajax结果？

import React, { Component } from 'react';
import $ from 'jquery';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    $.ajax({
      url: 'your_api_endpoint',
      method: 'GET',
      success: (response) => {
        this.setState({ data: response });
      },
      error: (error) => {
        console.log(error);
      }
    });
  }

  render() {
    // 根据需要使用this.state.data渲染组件
    return (
      <div>
        {/* 渲染组件内容 */}
      </div>
    );
  }
}

export default MyComponent;

shouldComponentUpdate(nextProps, nextState) {
  // 检查状态是否变化
  if (this.state.data === nextState.data) {
    return false; // 状态未变化，不重新渲染
  }
  return true; // 状态变化，重新渲染
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    $.ajax({
      url: 'your_api_endpoint',
      method: 'GET',
      success: (response) => {
        this.setState({ data: response });
      },
      error: (error) => {
        console.log(error);
      }
    });
  }

  render() {
    return (
      <div>
        <ChildComponent data={this.state.data} />
        <AnotherChildComponent data={this.state.data} />
      </div>
    );
  }
}