Valinta luokan komponenttien ja toiminnallisten komponenttien välillä Reactissa

Julkaissut Platon

seuraajia: 0

Valinnan tekeminen luokkakomponenttien ja toiminnallisten komponenttien välillä React PlatoBlockchain Data Intelligencessä. Pystysuuntainen haku. Ai.

Keskeiset erot

Reactissa komponentti on koodinpätkä, joka edustaa käyttöliittymän osaa. Reactissa on kahta päätyyppiä komponentteja: luokkakomponentit ja toiminnalliset komponentit.

Luokkakomponentit määritellään käyttämällä luokkaa, joka laajentaa React.Component-luokkaa. Ne ovat monipuolisempia ja niissä on enemmän vaihtoehtoja tila- ja elinkaaritapahtumien käsittelyyn. Tältä luokan komponentti näyttää:

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

Toiminnalliset komponentit ovat vain JavaScript-funktioita, jotka palauttavat React-elementin. Ne ovat yksinkertaisempia kuin luokkakomponentit, ja niitä on helpompi lukea ja kirjoittaa. Tässä on sama komponentti kuin yllä, kirjoitettuna toiminnalliseksi komponentiksi:

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

Milloin käyttää mitä

Yleensä sinun tulee käyttää toiminnallisia komponentteja, ellei sinun tarvitse käyttää ominaisuutta, joka on saatavilla vain luokkakomponenteissa, kuten tila- tai elinkaarimenetelmiä.
On olemassa muutamia syistä miksi saatat mieluummin käyttämällä luokkakomponentteja toiminnallisten komponenttien sijaan:

luettavuus: Luokkakomponentit voivat helpottaa koodin ymmärtämistä, varsinkin jos sinulla on paljon tila- tai elinkaarimenetelmiä. Koodi on järjestetty selkeästi määriteltyihin ja helposti löydettäviin menetelmiin.
Reus Kyky: Luokan komponentteja voidaan käyttää uudelleen helpommin, koska niitä voidaan laajentaa uusien komponenttien luomiseksi. Tämä voi olla erityisen hyödyllistä, jos komponenttien välillä on paljon yhteisiä toimintoja.
organisaatio: Luokkakomponentit voivat helpottaa koodin järjestämistä, koska voit ryhmitellä toisiinsa liittyvät menetelmät samaan komponenttiin. Tämä voi helpottaa koodin löytämistä ja ylläpitämistä.

On myös pari syytä, miksi saatat haluta kirjoittaa toiminnalliset komponentit:

Kun tila- tai elinkaarimenetelmiä ei tarvitse käyttää: Jos tila- tai elinkaarimenetelmiä ei tarvitse käyttää, niin toiminnallinen komponentti on hyvä valinta, koska se on yksinkertaisempi ja helpompi lukea ja kirjoittaa kuin luokkakomponentti.
Kun tarvitset puhdasta komponenttia: Toiminnalliset komponentit ovat "puhtaita" komponentteja, mikä tarkoittaa, että ne ovat riippuvaisia vain rekvisiittastaan eikä niillä ole omaa tilaa. Tästä voi olla hyötyä, jos haluat varmistaa, että komponentti hahmonnetaan uudelleen vain, kun sen rekvisiitta muuttuu.
Kun haluat optimoida suorituskyvyn: Koska toiminnalliset komponentit ovat puhtaita, React voi optimoida ne helpommin, mikä voi johtaa parempaan suorituskykyyn.
Kun haluat kirjoittaa tiivistä, helposti luettavaa koodia: Koska toiminnalliset komponentit ovat yksinkertaisempia ja niissä on vähemmän liikkuvia osia, ne voivat olla helpompia lukea ja ymmärtää, varsinkin jos sovelluksessasi on paljon komponentteja.

yleensä kannattaa käyttää toiminnallisia komponentteja, ellei sinulla ole erityistä tarvetta, joka voidaan täyttää vain luokkakomponentilla.

useEffect & useState

On kuitenkin tärkeää huomata, että voit käyttää tila- ja elinkaarimenetelmiä myös toiminnallisissa komponenteissa käyttämällä useState ja useEffect koukut. Yleensä sinun tulee valita komponenttityyppi, joka vastaa tarpeisiisi parhaiten ja joka tekee koodistasi helpoimmin luettavan ja ymmärrettävän.

Jos haluat edelleen toteuttaa tila- tai elinkaaritapahtumia, sinulla on mahdollisuus käyttää koukkuja komponenttisi käyttöönottoon.

Näin toteuttaisit useEffect ja useState toiminnallisten komponenttien sisällä

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

Täällä meillä on komponentti, joka seuraa lukua ja näyttää nykyisen määrän käyttäjälle. Komponentti käyttää useState koukku lisätäksesi tilan toiminnalliseen komponenttiin ja useEffect koukku suorittaaksesi toiminnon (päivittää asiakirjan otsikon), kun määrä muuttuu.

Keskeiset ostokset

Nämä ovat tärkeimmät pohdinnat valittaessa luokkakomponenttien ja toiminnallisten komponenttien välillä Reactissa:

Luokkakomponentit määritetään käyttämällä luokkaa, joka laajentaa React.Component-luokkaa ja sisältää enemmän vaihtoehtoja tila- ja elinkaaritapahtumien käsittelyyn.
Toiminnalliset komponentit ovat vain JavaScript-funktioita, jotka palauttavat React-elementin ja ovat yksinkertaisempia ja helpompia lukea ja kirjoittaa.
Käytä toiminnallisia komponentteja, ellei sinun tarvitse käyttää ominaisuutta, joka on saatavilla vain luokkakomponenteissa, kuten tila- tai elinkaarimenetelmiä.
UseState- ja useEffect-koukkujen avulla voit lisätä tilan ja tehdä sivuvaikutuksia toiminnallisissa komponenteissa.
Kaiken kaikkiaan valinta luokan komponenttien ja toiminnallisten komponenttien välillä riippuu siitä, mikä sopii parhaiten tarpeisiisi ja mikä tekee koodistasi helpoimmin luettavan ja ymmärrettävän.

Toivottavasti tämä lyhyt selitys auttaa sinua. Jos haluat mentorointia tai ohjausta javascriptin oppimiseen, reagointiin tai verkkokehitykseen yleensä, ota minuun yhteyttä 1:1-istuntoa varten.