0

我开始学习 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 的新手。

4

1 回答 1

1

第一个示例是类组件，第二个示例是功能组件。React 开发正在从类转向功能组件。useEffect 应该替换类组件中的几个生命周期函数。

两件事要看功能组件和类组件。第二组要查找的是生命周期函数和功能组件挂钩。

这是一个链接，将在高层次上解释这些差异。 https://dev.to/danielleye/react-class-component-vs-function-component-with-hooks-13dg

于 2020-07-18T16:16:10.030 回答