reactjs - 反応におけるこの2つのjsの違い

Question

React JS の学習を開始しましたが、これら 2 つのファイルの違いを説明できる人はいますか? どちらも同じことをします。

最初のJS

import React, { useEffect, useState } from 'react'
import Product from './Product';
import './Today.css';
import { Link } from 'react-router-dom';
import { render } from '@testing-library/react';

export default class Today extends React.Component {

    state = {
        loading : true,
        fixture : null
    };

    async componentDidMount() {
        
        const OPTIONS = {
            method : 'GET',
                headers : {
                    'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
                    'X-RapidAPI-Key' : '###'
                }
        };
        const url = 'https://api-football-v1.p.rapidapi.com/v2/fixtures/date/2020-07-18';
        const response = await fetch(url,OPTIONS);
        const fixtures = await response.json();
        this.setState({ fixture: fixtures.api.fixtures, loading: false});
        const teamData = fixtures.api && fixtures.api.fixtures > 0 ? fixtures.api.fixtures : [];
        console.log(this.state);
    }

    render() {
        return (
            <div className="today">
               {this.state.loading || !this.state.fixture ? (
               <div><img src=""/></div> 
               ) : ( 
               <div>
                   <div>
                       {this.state.fixture.slice(0,10).map(fixtureToday => (
                         <div>{fixtureToday.homeTeam.team_name}</div>
                       ))}
                    </div>
               </div>
               )}
            </div>
        )
    }
}

二つ目

import React, { useState, useEffect } from 'react';
import './AnotherDay.css';
import { Link } from 'react-router-dom';

function AnotherDay() {

    useEffect(() => {
        fetchItems();
    },[]);

    const OPTIONS = {
        method : 'GET',
        headers : {
            'X-RapidAPI-Host' : 'api-football-v1.p.rapidapi.com',
            'X-RapidAPI-Key' : '###'
        }
    };
    
    const [fixtures, setItems] = useState([]);

    const fetchItems = async () => {
        const data = await fetch(
            'https://api-football-v1.p.rapidapi.com/v2/fixtures/date/2020-07-18' , OPTIONS
            );
        const fixtures = await data.json();
        const teamData = fixtures.api && fixtures.api.fixtures.length > 0 ? fixtures.api.fixtures : [];

        console.log(teamData);
        setItems(teamData);
    }

  return (
    <div>
      {fixtures.slice(0,10).map(fixture => (
        <div>{fixture.homeTeam.team_name}</div>
      ))}
    </div>
  );
}

export default AnotherDay;

そして私が持っているApp.jsで

import React from 'react'
import './Today.css';
import { Link } from 'react-router-dom';
import Today from './Today ';
import AnotherDay from './EvenimenteMaine';

function TodayEvents() {
    return (
        <div className="today">
        <div className="todayEvents">
           <Today />
        </div>
        <div className="anotherDayEvents">
            <AnotherDay />
        </div>

        </div>
    )
}

export default TodayEvents

両方のdivで同じ結果が得られました。私の質問は、違いは何ですか? 最初のものはクラスで、2番目のものは関数ですか? どちらが正しい方法ですか？

ありがとう、初心者の質問かもしれませんが、私はReactを学ぶのが初めてです。