Разница между этими двумя js в React

Question

Я начинаю изучать React JS, и кто-нибудь может объяснить мне разницу между этими двумя файлами? Оба они делают одно и то же.

Первый 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. У меня вопрос, а в чем разница? Первый - это класс, а второй - функция? Какой из них правильный?

Спасибо, возможно, это вопрос новичка, но я новичок в изучении React.

Answer 1

Первый пример - это компонент класса, второй - функциональный компонент. Разработка React уходит от классов к функциональным компонентам. useEffect должен заменить несколько функций жизненного цикла из компонентов класса.

Две вещи, которые нужно изучить в функциональных компонентах и компонентах класса. Второй набор вещей, на которые нужно обратить внимание, - это функции жизненного цикла и функциональные привязки компонентов.

Вот ссылка, которая объяснит на высоком уровне различия.https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg