Making The Choice Between Class Components And Functional Components In React

Genudgivet af Platon

Abonnenter: 0

Making the Choice Between Class Components and Functional Components in React PlatoBlockchain Data Intelligence. Vertical Search. Ai.

Kerneforskelle

I React er en komponent et stykke kode, der repræsenterer en del af en brugergrænseflade. Der er to hovedtyper af komponenter i React: klassekomponenter og funktionelle komponenter.

Klassekomponenter defineres ved hjælp af en klasse, der udvider React.Component-klassen. De er mere funktionelle og har flere muligheder for at håndtere tilstands- og livscyklushændelser. Sådan ser en klassekomponent ud:

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

Funktionelle komponenter er blot JavaScript-funktioner, der returnerer et React-element. De er enklere end klassekomponenter og er nemmere at læse og skrive. Her er den samme komponent som ovenfor, skrevet som en funktionel komponent:

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

Hvornår skal man bruge hvad

Generelt bør du bruge funktionelle komponenter, medmindre du skal bruge en funktion, der kun er tilgængelig i klassekomponenter, såsom tilstands- eller livscyklusmetoder.
Der er et par årsager hvorfor du måske foretrækker det bruge klassekomponenter frem for funktionelle komponenter:

Læsbarhed: Klassekomponenter kan gøre det lettere at forstå koden, især hvis du har mange tilstands- eller livscyklusmetoder. Koden er organiseret i metoder, der er klart definerede og nemme at finde.
Reus Evne: Klassekomponenter kan lettere genbruges, fordi de kan udvides til at skabe nye komponenter. Dette kan især være nyttigt, hvis du har en masse delt funktionalitet mellem komponenter.
Organisation: Klassekomponenter kan gøre det nemmere at organisere din kode, fordi du kan gruppere relaterede metoder sammen i den samme komponent. Dette kan gøre det nemmere at finde og vedligeholde koden.

Der er også et par grunde til, at du måske vil vælge at skrive funktionelle komponenter:

Når du ikke skal bruge tilstands- eller livscyklusmetoder: Hvis du ikke skal bruge tilstands- eller livscyklusmetoder, så er en funktionel komponent et godt valg, fordi den er enklere og nemmere at læse og skrive end en klassekomponent.
Når du har brug for en ren komponent: Funktionelle komponenter er "rene" komponenter, hvilket betyder, at de kun afhænger af deres rekvisitter og ikke har deres egen tilstand. Dette kan være nyttigt, hvis du vil sikre, at en komponent kun gengives, når dens rekvisitter ændres.
Når du vil optimere ydeevnen: Fordi funktionelle komponenter er rene, kan de nemmere optimeres af React, hvilket kan resultere i bedre ydeevne.
Når du vil skrive kortfattet, letlæselig kode: Fordi funktionelle komponenter er enklere og har færre bevægelige dele, kan de være nemmere at læse og forstå, især hvis du har mange komponenter i din applikation.

generelt bør du bruge funktionelle komponenter, medmindre du har et specifikt behov, som kun kan opfyldes med en klassekomponent.

useEffect & useState

Det er dog vigtigt at bemærke, at du også kan bruge tilstands- og livscyklusmetoder i funktionelle komponenter ved at bruge useState , useEffekt kroge. Generelt bør du vælge den type komponent, der giver mest mening til dine behov, og som vil gøre din kode den nemmeste at læse og forstå.

Hvis du stadig ønsker at implementere tilstands- eller livscyklushændelser, har du mulighed for at bruge kroge til at aktivere din komponent.

Sådan ville du implementere useEffekt , useState inde i dine funktionelle 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, der holder styr på en optælling og viser den aktuelle optælling til brugeren. Komponenten bruger useState krog for at tilføje tilstand til den funktionelle komponent, og useEffekt krog for at udføre en handling (opdatering af dokumenttitlen), når antallet ændres.

Nøgleforsøg

Disse er de vigtigste ting, når det kommer til at vælge mellem klassekomponenter og funktionelle komponenter i React:

Klassekomponenter defineres ved hjælp af en klasse, der udvider React.Component-klassen og har flere muligheder for at håndtere tilstands- og livscyklushændelser.
Funktionelle komponenter er blot JavaScript-funktioner, der returnerer et React-element og er enklere og nemmere at læse og skrive.
Du bør bruge funktionelle komponenter, medmindre du skal bruge en funktion, der kun er tilgængelig i klassekomponenter, såsom tilstands- eller livscyklusmetoder.
Du kan bruge useState- og useEffect-krogene til at tilføje tilstand og udføre bivirkninger i funktionelle komponenter.
Overordnet set kommer valget mellem klassekomponenter og funktionelle komponenter ned på, hvad der fungerer bedst til dine behov, og hvad der gør din kode nemmest at læse og forstå.

Jeg håber, at denne korte forklaring vil hjælpe dig. Hvis du gerne vil have mentorordninger eller anden vejledning på din vej til at lære javascript, reagere eller webudvikling generelt, er du velkommen til at kontakte mig for en 1:1 session.