Velge mellom klassekomponenter og funksjonelle komponenter i React

Velge mellom klassekomponenter og funksjonelle komponenter i React

Tidsstempel: 9. januar 2023 4:30
Å velge mellom klassekomponenter og funksjonelle komponenter i React PlatoBlockchain Data Intelligence. Vertikalt søk. Ai.

Kjerneforskjeller

I React er en komponent et stykke kode som representerer en del av et brukergrensesnitt. Det er to hovedtyper av komponenter i React: klassekomponenter og funksjonelle komponenter.

Klassekomponenter er definert ved hjelp av en klasse som utvider React.Component-klassen. De er mer funksjonsrike og har flere muligheter for å håndtere tilstands- og livssyklushendelser. Slik ser en klassekomponent ut:

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

Funksjonelle komponenter er bare JavaScript-funksjoner som returnerer et React-element. De er enklere enn klassekomponenter og er lettere å lese og skrive. Her er den samme komponenten som ovenfor, skrevet som en funksjonell komponent:

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

Når du skal bruke hva

Generelt bør du bruke funksjonelle komponenter med mindre du trenger å bruke en funksjon som bare er tilgjengelig i klassekomponenter, for eksempel tilstands- eller livssyklusmetoder.
Det er noen grunner hvorfor du kanskje foretrekker det bruke klassekomponenter fremfor funksjonelle komponenter:

  1. lesbarhet: Klassekomponenter kan gjøre det lettere å forstå koden, spesielt hvis du har mange tilstands- eller livssyklusmetoder. Koden er organisert i metoder som er klart definerte og enkle å finne.

  2. Reus Evne: Klassekomponenter kan lettere gjenbrukes, fordi de kan utvides til å lage nye komponenter. Dette kan være spesielt nyttig hvis du har mye delt funksjonalitet mellom komponenter.

  3. Organisasjon: Klassekomponenter kan gjøre det enklere å organisere koden din, fordi du kan gruppere relaterte metoder sammen i samme komponent. Dette kan gjøre det lettere å finne og vedlikeholde koden.

Det er også et par grunner til at du kanskje vil velge å skrive funksjonelle komponenter:

  1. Når du ikke trenger å bruke tilstands- eller livssyklusmetoder: Hvis du ikke trenger å bruke tilstands- eller livssyklusmetoder, er en funksjonell komponent et godt valg, fordi den er enklere og enklere å lese og skrive enn en klassekomponent.

  2. Når du trenger en ren komponent: Funksjonelle komponenter er "rene" komponenter, noe som betyr at de bare er avhengige av rekvisittene og ikke har sin egen tilstand. Dette kan være nyttig hvis du vil sikre at en komponent bare gjengis når rekvisittene endres.

  3. Når du ønsker å optimalisere ytelsen: Fordi funksjonelle komponenter er rene, kan de lettere optimaliseres av React, noe som kan resultere i bedre ytelse.

  4. Når du vil skrive kortfattet, lettlest kode: Fordi funksjonelle komponenter er enklere og har færre bevegelige deler, kan de være lettere å lese og forstå, spesielt hvis du har mange komponenter i applikasjonen din.

generelt bør du bruke funksjonelle komponenter med mindre du har et spesifikt behov som bare kan dekkes med en klassekomponent.

useEffect & useState

Det er imidlertid viktig å merke seg at du også kan bruke tilstands- og livssyklusmetoder i funksjonelle komponenter, ved å bruke useState og useEffect kroker. Generelt bør du velge den typen komponent som gir mest mening for dine behov, og som vil gjøre koden din lettest å lese og forstå.

Hvis du fortsatt ønsker å implementere tilstands- eller livssyklushendelser, vil du ha muligheten til å bruke kroker for å aktivere komponenten din.

Dette er hvordan du ville implementert useEffect og useState inne i dine funksjonelle komponenter

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

Her har vi en komponent som holder styr på en telling, og viser gjeldende telling for brukeren. Komponenten bruker useState krok for å legge til tilstand til den funksjonelle komponenten, og useEffect krok for å utføre en handling (oppdatering av dokumenttittelen) når antallet endres.

Nøkkelfunksjoner

Dette er hovedalternativene når det gjelder å velge mellom klassekomponenter og funksjonelle komponenter i React:

  1. Klassekomponenter er definert ved hjelp av en klasse som utvider React.Component-klassen, og har flere alternativer for å håndtere tilstands- og livssyklushendelser.
  2. Funksjonelle komponenter er bare JavaScript-funksjoner som returnerer et React-element, og er enklere og enklere å lese og skrive.
  3. Du bør bruke funksjonelle komponenter med mindre du trenger å bruke en funksjon som bare er tilgjengelig i klassekomponenter, for eksempel tilstands- eller livssyklusmetoder.
  4. Du kan bruke useState- og useEffect-krokene til å legge til tilstand og utføre bivirkninger i funksjonelle komponenter.
  5. Samlet sett kommer valget mellom klassekomponenter og funksjonelle komponenter ned til hva som fungerer best for dine behov og hva som gjør koden din lettest å lese og forstå.

Jeg håper denne korte forklaringen vil hjelpe deg. Hvis du vil ha veiledning eller veiledning for å lære javascript, reagere eller webutvikling generelt, kan du gjerne kontakte meg for en 1:1 økt.

Tidstempel:

Mer fra Codementor React Fakta