Izbira med komponentami razreda in funkcionalnimi komponentami v Reactu

Temeljne razlike

V Reactu je komponenta del kode, ki predstavlja del uporabniškega vmesnika. V Reactu obstajata dve glavni vrsti komponent: komponente razreda in funkcionalne komponente.

Komponente razreda so definirane z uporabo razreda, ki razširja razred React.Component. Imajo več funkcij in imajo več možnosti za obravnavo dogodkov v stanju in življenjskem ciklu. Takole izgleda komponenta razreda:

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

Funkcionalne komponente so samo funkcije JavaScript, ki vrnejo element React. So enostavnejši od komponent razreda in jih je lažje brati in pisati. Tukaj je ista komponenta kot zgoraj, zapisana kot funkcionalna komponenta:

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

Kdaj kaj uporabiti

Na splošno bi morali uporabljati funkcionalne komponente, razen če morate uporabiti funkcijo, ki je na voljo samo v komponentah razreda, kot so metode stanja ali življenjskega cikla.
Obstaja nekaj Razlogi zakaj bi morda raje uporaba razrednih komponent namesto funkcionalnih komponent:

1. berljivost: Komponente razreda lahko olajšajo razumevanje kode, še posebej, če imate veliko metod stanja ali življenjskega cikla. Koda je organizirana v metode, ki so jasno definirane in jih je enostavno najti.

2. Ponovna uporabnost: Komponente razreda je mogoče lažje ponovno uporabiti, ker jih je mogoče razširiti za ustvarjanje novih komponent. To je lahko še posebej uporabno, če imate veliko deljenih funkcij med komponentami.

3. Organizacija: Komponente razreda lahko olajšajo organiziranje vaše kode, saj lahko sorodne metode združite v isto komponento. To lahko olajša iskanje in vzdrževanje kode.

Obstaja tudi nekaj razlogov, zakaj bi se morda želeli odločiti za pisanje funkcionalne komponente:

1. Ko vam ni treba uporabljati metod stanja ali življenjskega cikla: Če vam ni treba uporabljati metod stanja ali življenjskega cikla, je funkcionalna komponenta dobra izbira, ker je preprostejša in lažja za branje in pisanje kot komponenta razreda.

2. Ko potrebujete čisto komponento: Funkcionalne komponente so "čiste" komponente, kar pomeni, da so odvisne samo od svojih rekvizitov in nimajo lastnega stanja. To je lahko uporabno, če želite zagotoviti, da se komponenta ponovno upodobi le, ko se spremenijo njeni rekviziti.

3. Ko želite optimizirati zmogljivost: ker so funkcionalne komponente čiste, jih lahko React lažje optimizira, kar lahko povzroči boljšo zmogljivost.

4. Ko želite napisati jedrnato, lahko berljivo kodo: ker so funkcionalne komponente preprostejše in imajo manj gibljivih delov, jih je lažje brati in razumeti, še posebej, če imate v aplikaciji veliko komponent.

na splošno bi morali uporabljati funkcionalne komponente, razen če imate posebno potrebo, ki jo je mogoče zadovoljiti samo s komponento razreda.

useEffect & useState

Vendar je pomembno upoštevati, da lahko metode stanja in življenjskega cikla uporabite tudi v funkcionalnih komponentah z uporabo useState in useEffect kavlji. Na splošno bi morali izbrati vrsto komponente, ki je najbolj smiselna za vaše potrebe in bo vašo kodo naredila najlažjo za branje in razumevanje.

Če še vedno želite implementirati dogodke stanja ali življenjskega cikla, boste imeli možnost uporabiti kljuke, da omogočite svojo komponento.

Tako bi izvajali useEffect in useState znotraj vaših funkcionalnih komponent

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> );
}

Tukaj imamo komponento, ki spremlja štetje in uporabniku prikaže trenutno štetje. Komponenta uporablja useState kavelj za dodajanje stanja funkcionalni komponenti in useEffect kavelj za izvedbo dejanja (posodobitev naslova dokumenta), ko se štetje spremeni.

Ključni izdelki

To so glavni zaključki, ko gre za izbiro med komponentami razreda in funkcionalnimi komponentami v Reactu:

1. Komponente razreda so definirane z uporabo razreda, ki razširja razred React.Component, in imajo več možnosti za obravnavanje dogodkov stanja in življenjskega cikla.
2. Funkcionalne komponente so samo funkcije JavaScript, ki vrnejo element React in so enostavnejše ter lažje brati in pisati.
3. Uporabite funkcionalne komponente, razen če morate uporabiti funkcijo, ki je na voljo samo v komponentah razreda, kot so metode stanja ali življenjskega cikla.
4. Za dodajanje stanja in izvajanje stranskih učinkov v funkcionalnih komponentah lahko uporabite kljuki useState in useEffect.
5. Na splošno je izbira med komponentami razreda in funkcionalnimi komponentami odvisna od tega, kaj najbolje ustreza vašim potrebam in zaradi česar je vaša koda najlažja za branje in razumevanje.

Upam, da vam bo ta kratka razlaga pomagala. Če želite mentorstvo ali kakršne koli smernice na vaši poti učenja javascripta, reakcije ali spletnega razvoja na splošno, me kontaktirajte za sejo 1:1.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://www.codementor.io/maximiliangeiger/making-the-choice-between-class-components-and-functional-components-in-react-20uvaeyqci