Klassi komponentide ja funktsionaalsete komponentide vahel valiku tegemine Reactis

Taasavaldanud Platon

järgijaid: 0

Klassikomponentide ja funktsionaalsete komponentide vahel valiku tegemine React PlatoBlockchaini andmeluures. Vertikaalne otsing. Ai.

Põhilised erinevused

Reactis on komponent koodiosa, mis esindab kasutajaliidese osa. Reactis on kahte peamist tüüpi komponente: klassikomponendid ja funktsionaalsed komponendid.

Klassi komponendid määratletakse klassi React.Component laiendava klassi abil. Need on funktsioonirikkamad ja neil on rohkem võimalusi oleku ja elutsükli sündmuste käsitlemiseks. Klassi komponent näeb välja järgmine:

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

Funktsionaalsed komponendid on lihtsalt JavaScripti funktsioonid, mis tagastavad elemendi React. Need on lihtsamad kui klassi komponendid ning neid on lihtsam lugeda ja kirjutada. Siin on sama komponent nagu ülal, kirjutatud funktsionaalse komponendina:

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Millal mida kasutada

Üldiselt peaksite kasutama funktsionaalseid komponente, välja arvatud juhul, kui peate kasutama funktsiooni, mis on saadaval ainult klassikomponentides, näiteks oleku- või elutsükli meetodid.
On mõned põhjustel miks sa võiksid eelistada klassi komponentide kasutamine funktsionaalsete komponentide asemel:

loetavus: klassi komponendid võivad koodi mõistmist hõlbustada, eriti kui teil on palju oleku- või elutsükli meetodeid. Kood on jaotatud meetoditeks, mis on selgelt määratletud ja kergesti leitavad.
Korduvkasutatavus: klassi komponente saab hõlpsamini uuesti kasutada, kuna neid saab uute komponentide loomiseks laiendada. See võib olla eriti kasulik, kui teil on komponentide vahel palju jagatud funktsioone.
Organisatsioon: klassi komponendid võivad koodi korraldamist hõlbustada, kuna saate seotud meetodid ühte komponenti koondada. See võib muuta koodi leidmise ja hooldamise lihtsamaks.

Samuti on paar põhjust, miks võiksite valida kirjutamise funktsionaalsed komponendid:

Kui te ei pea kasutama oleku- või olelustsükli meetodeid: Kui te ei pea kasutama oleku- või elutsükli meetodeid, on funktsionaalne komponent hea valik, kuna seda on lihtsam ja lihtsam lugeda ja kirjutada kui klassikomponenti.
Kui vajate puhast komponenti: funktsionaalsed komponendid on "puhtad" komponendid, mis tähendab, et need sõltuvad ainult nende rekvisiitidest ja neil ei ole oma olekut. See võib olla kasulik, kui soovite tagada, et komponent renderdaks uuesti ainult siis, kui selle rekvisiidid muutuvad.
Kui soovite jõudlust optimeerida: kuna funktsionaalsed komponendid on puhtad, saab React neid hõlpsamini optimeerida, mis võib kaasa tuua parema jõudluse.
Kui soovite kirjutada kokkuvõtlikku ja hõlpsasti loetavat koodi: kuna funktsionaalsed komponendid on lihtsamad ja neil on vähem liikuvaid osi, on neid lihtsam lugeda ja mõista, eriti kui teie rakenduses on palju komponente.

üldiselt peaksite kasutama funktsionaalseid komponente, välja arvatud juhul, kui teil on spetsiifiline vajadus, mida saab rahuldada ainult klassikomponendiga.

useEffect & useState

Siiski on oluline märkida, et oleku- ja elutsükli meetodeid saate kasutada ka funktsionaalsetes komponentides, kasutades useState ja useEffect konksud. Üldiselt peaksite valima komponendi tüübi, mis on teie vajadustele kõige mõistlikum ja mis muudab teie koodi kõige hõlpsamini loetavaks ja arusaadavaks.

Kui soovite siiski oleku või elutsükli sündmusi rakendada, on teil võimalus oma komponendi lubamiseks kasutada konkse.

Nii rakendaksite useEffect ja useState oma funktsionaalsete komponentide sees

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Siin on meil komponent, mis jälgib loendust ja kuvab kasutajale praeguse loenduse. Komponent kasutab useState konks funktsionaalse komponendi oleku lisamiseks ja useEffect konks toimingu sooritamiseks (dokumendi pealkirja värskendamine), kui loendus muutub.

Võtme tagasivõtmine

Need on peamised näpunäited Reacti klassikomponentide ja funktsionaalsete komponentide vahel valimiseks:

Klassi komponendid määratletakse klassiga, mis laiendab klassi React.Component ja millel on rohkem võimalusi oleku- ja elutsükli sündmuste käsitlemiseks.
Funktsionaalsed komponendid on lihtsalt JavaScripti funktsioonid, mis tagastavad Reacti elemendi ning mida on lihtsam lugeda ja kirjutada.
Peaksite kasutama funktsionaalseid komponente, välja arvatud juhul, kui teil on vaja kasutada funktsiooni, mis on saadaval ainult klassikomponentides (nt oleku- või elutsükli meetodid).
Funktsionaalsete komponentide oleku lisamiseks ja kõrvalmõjude tegemiseks saate kasutada konkse useState ja useEffect.
Üldiselt taandub valik klassikomponentide ja funktsionaalsete komponentide vahel sellele, mis teie vajadustele kõige paremini sobib ja mis muudab teie koodi kõige hõlpsamini loetavaks ja arusaadavaks.

Loodan, et see lühike selgitus on teile abiks. Kui soovite juhendamist või juhiseid JavaScripti õppimiseks, reageerimiseks või veebiarenduseks üldiselt, võtke minuga 1:1 seansi korraldamiseks ühendust.