React JS继承获取数据

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

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return <div>{this.state.data ? this.state.data.map(item => <p key={item.id}>{item.name}</p>) : 'Loading...'}</div>;
  }
}

class SpecificDataComponent extends DataFetchingComponent {
  render() {
    return (
      <div>
        <h1>Specific Data</h1>
        {super.render()}
      </div>
    );
  }
}

import React, { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);
  return data;
}

function DataFetchingComponent() {
  const data = useFetch('https://api.example.com/data');
  return <div>{data ? data.map(item => <p key={item.id}>{item.name}</p>) : 'Loading...'}</div>;
}

function SpecificDataComponent() {
  return (
    <div>
      <h1>Specific Data</h1>
      <DataFetchingComponent />
    </div>
  );
}