Att göra valet mellan klasskomponenter och funktionella komponenter i reaktion

Återutgiven av Platon

anhängare: 0

Att göra valet mellan klasskomponenter och funktionella komponenter i React PlatoBlockchain Data Intelligence. Vertikal sökning. Ai.

Kärna skillnader

I React är en komponent en bit kod som representerar en del av ett användargränssnitt. Det finns två huvudtyper av komponenter i React: klasskomponenter och funktionella komponenter.

Klasskomponenter definieras med en klass som utökar klassen React.Component. De är mer funktionsrika och har fler alternativ för att hantera tillstånd och livscykelhändelser. Så här ser en klasskomponent ut:

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

Funktionella komponenter är bara JavaScript-funktioner som returnerar ett React-element. De är enklare än klasskomponenter och är lättare att läsa och skriva. Här är samma komponent som ovan, skriven som en funktionell komponent:

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

När ska man använda vad

I allmänhet bör du använda funktionella komponenter om du inte behöver använda en funktion som bara är tillgänglig i klasskomponenter, såsom tillstånd eller livscykelmetoder.
Det finns några skäl varför du kanske föredrar använda klasskomponenter framför funktionella komponenter:

läsbarhet: Klasskomponenter kan göra det lättare att förstå koden, speciellt om du har många tillstånds- eller livscykelmetoder. Koden är organiserad i metoder som är tydligt definierade och lätta att hitta.
reus Förmåga: Klasskomponenter kan återanvändas lättare, eftersom de kan utökas för att skapa nya komponenter. Detta kan vara särskilt användbart om du har mycket delad funktionalitet mellan komponenter.
Organisation: Klasskomponenter kan göra det lättare att organisera din kod, eftersom du kan gruppera relaterade metoder tillsammans i samma komponent. Detta kan göra det lättare att hitta och underhålla koden.

Det finns också ett par anledningar till varför du kanske vill välja att skriva funktionella komponenter:

När du inte behöver använda tillstånds- eller livscykelmetoder: Om du inte behöver använda tillstånds- eller livscykelmetoder är en funktionell komponent ett bra val, eftersom den är enklare och lättare att läsa och skriva än en klasskomponent.
När du behöver en ren komponent: Funktionella komponenter är "rena" komponenter, vilket innebär att de bara är beroende av deras rekvisita och inte har sitt eget tillstånd. Detta kan vara användbart om du vill säkerställa att en komponent återrenderas endast när dess rekvisita ändras.
När du vill optimera prestanda: Eftersom funktionella komponenter är rena kan de enklare optimeras av React, vilket kan resultera i bättre prestanda.
När du vill skriva kortfattad, lättläst kod: Eftersom funktionella komponenter är enklare och har färre rörliga delar kan de vara lättare att läsa och förstå, speciellt om du har många komponenter i din applikation.

i allmänhet bör du använda funktionella komponenter om du inte har ett specifikt behov som bara kan tillgodoses med en klasskomponent.

useEffect & useState

Det är dock viktigt att notera att du även kan använda tillstånds- och livscykelmetoder i funktionella komponenter, med hjälp av useState och useEffect krokar. I allmänhet bör du välja den typ av komponent som är mest meningsfull för dina behov, och som kommer att göra din kod den enklaste att läsa och förstå.

Om du fortfarande vill implementera tillstånd eller livscykelhändelser har du möjlighet att använda krokar för att aktivera din komponent.

Så här skulle du implementera useEffect och useState inuti dina funktionella 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> );
}

Här har vi en komponent som håller reda på en räkning och visar den aktuella räkningen för användaren. Komponenten använder useState krok för att lägga till tillstånd till den funktionella komponenten, och useEffect krok för att utföra en åtgärd (uppdatering av dokumenttiteln) när antalet ändras.

Key Takeaways

Det här är de viktigaste tipsen när det gäller att välja mellan klasskomponenter och funktionella komponenter i React:

Klasskomponenter definieras med en klass som utökar klassen React.Component och har fler alternativ för att hantera tillstånd och livscykelhändelser.
Funktionella komponenter är bara JavaScript-funktioner som returnerar ett React-element och är enklare och lättare att läsa och skriva.
Du bör använda funktionella komponenter om du inte behöver använda en funktion som endast är tillgänglig i klasskomponenter, såsom tillstånd eller livscykelmetoder.
Du kan använda hakarna useState och useEffect för att lägga till tillstånd och utföra biverkningar i funktionella komponenter.
Sammantaget handlar valet mellan klasskomponenter och funktionella komponenter om vad som fungerar bäst för dina behov och vad som gör din kod lättast att läsa och förstå.

Jag hoppas att denna korta förklaring hjälper dig. Om du vill ha mentorskap eller någon vägledning på din väg att lära dig javascript, reagera eller webbutveckling i allmänhet, är du välkommen att kontakta mig för en 1:1 session.