Hvis du er ny til React, undrer du dig måske over, hvad React Hooks er, og hvornår du skal bruge dem. React introducerede kun kroge i sin 16.8-udgivelse, men de er hurtigt blevet en væsentlig del af biblioteket.
Lær alt om det grundlæggende i React Hooks, og opdag nogle bedste fremgangsmåder til at bruge dem i dine React-applikationer.
Hvad er React Hooks?
React Hooks lader dig bruge tilstand og andre React-funktioner uden at skrive ekstra kode. Hooks er en fantastisk måde at gøre din kode mere læsbar og vedligeholdelig.
Der er et par stykker forskellige kroge i React, men de mest brugte er useState og useEffect. UseState-krogen lader dig tilføje tilstand til dine komponenter. Dette er nyttigt til ting som at holde styr på en brugers input eller ændringer i en formular. UseEffect-krogen lader dig køre en funktion, hver gang en komponent gengiver. Dette er nyttigt til ting som at hente data fra en API eller oprette et abonnement.
Hvornår skal du bruge React Hooks?
Du bør bruge React Hooks, når du har brug for at tilføje ekstra funktionalitet til en komponent. For eksempel, hvis du har brug for at holde styr på en brugers input, vil du bruge useState hook. Hvis du har brug for at hente data fra en API, skal du bruge useEffect-krogen. Du kan også
oprette tilpassede hooks til API-kald.Hvis du lige er begyndt at bruge React, behøver du muligvis ikke bruge Hooks endnu. Men efterhånden som du bygger mere komplekse apps, vil du opdage, at Hooks er en fantastisk måde at tilføje ekstra funktionalitet til dine komponenter.
Bedste praksis med React Hooks
Nu hvor du ved, hvad React Hooks er, og hvornår du skal bruge dem, lad os tale om nogle bedste fremgangsmåder.
1. Kun opkaldskroge fra React-funktioner
Du bør kun kalde React Hooks fra React-funktioner. Hvis du forsøger at kalde react hooks fra en klassekomponent, får du en fejl.
Dette skyldes, at du kun kan kalde en React Hook fra en React-funktion. React-funktioner er komponenter, som du erklærer med et funktionsnøgleord.
Her er et eksempel på en React-funktionskomponent:
importere Reager, { useState } fra 'reagere';fungereApp() {
konst [count, setCount] = useState(0);
Vend tilbage (
<div>
<s>{tælle}</s>
<knap påKlik={() => setCount (tæl + 1)}>
Klik på mig
</button>
</div>
);
}
Og her er et eksempel på en klassekomponent:
importere Reager, { Komponent } fra 'reagere';klasseAppstrækker sigKomponent{
tilstand = {
tæller: 0
};
render() {
Vend tilbage (
<div>
<s>{this.state.count}</s>
<knap påKlik={() => this.setState({ count: this.state.count + 1 })}>
Klik på mig
</button>
</div>
);
}
}
Det første eksempel erklærer App-komponenten ved hjælp af funktionsnøgleordet, mens det andet bruger klassenøgleordet.
2. Brug kun én brugseffektkrog
Hvis du bruger useEffect-krogen, bør du kun bruge én pr. komponent. Dette skyldes, at useEffect kører, når en komponent gengiver.
Hvis du har flere useEffect-hooks, vil de alle køre, når en komponent gengives. Dette kan føre til uventet adfærd og præstationsproblemer. I nedenstående eksempel vil begge useEffects køre, når app-komponenten gengives.
importere Reager, { useState, useEffect } fra 'reagere';fungereApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Dette vil køre, når App-komponenten gengives!');
}, []);useEffect(() => {
console.log('Dette vil også køre, når app-komponenten gengives!');
}, []);
Vend tilbage (
<div>
<s>{tælle}</s>
<knap påKlik={() => setCount (tæl + 1)}>
Klik på mig
</button>
</div>
);
}
I stedet for at bruge flere useEffect-hooks, kan du bruge en enkelt useEffect-hook og lægge al din kode ind i den. I eksemplet nedenfor kører kun én useEffect-hook, hver gang app-komponenten gengives.
importere Reager, { useState, useEffect } fra 'reagere';fungereApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Dette vil køre, når App-komponenten gengives!');
console.log('Dette vil også køre, når app-komponenten gengives!');
}, []);
Vend tilbage (
<div>
<s>{tælle}</s>
<knap påKlik={() => setCount (tæl + 1)}>
Klik på mig
</button>
</div>
);
}
Det betyder, at du kun kan kalde React Hooks fra det første eksempel. Hvis du prøver at ringe til React Hooks fra det andet eksempel, får du en fejl.
3. Brug kroge på topniveau
En af de bedste fremgangsmåder med React Hooks er at bruge dem på øverste niveau. Du bør undgå at bruge kroge inde i løkker, betingelser eller indlejrede funktioner. For eksempel, hvis du brugerState inde i en for-løkke, vil React, hver gang løkken kører, oprette en ny tilstandsvariabel. Dette kan føre til uventet adfærd.
importere Reager, { useState } fra 'reagere';fungereApp() {
til (lade i = 0; jeg < 10; i++) {
// Gør ikke dette!
konst [count, setCount] = useState(0);
}
Vend tilbage (
<div>
<s>{tælle}</s>
<knap påKlik={() => setCount (tæl + 1)}>
Klik på mig
</button>
</div>
);
}
I ovenstående eksempel vil app-komponenten kun gengive optællingen og knappen fra den sidste iteration af løkken. Dette skyldes, at React kun opdaterer tilstandsvariablen fra sidste iteration.
I stedet for at bruge State inde i en løkke, kan du erklære en tilstandsvariabel uden for løkken. På denne måde vil React kun oprette én tilstandsvariabel og opdatere den i overensstemmelse hermed.
importere Reager, { useState } fra 'reagere';fungereApp() {
// Dette er den korrekte måde at bruge useState i en løkke
konst [count, setCount] = useState(0);til (lade i = 0; jeg < 10; i++) {
// ...
}
Vend tilbage (
<div>
<s>{tælle}</s>
<knap påKlik={() => setCount (tæl + 1)}>
Klik på mig
</button>
</div>
);
}
4. Overbrug ikke kroge
React Hooks er et kraftfuldt værktøj, men du bør undgå at overbruge dem. Hvis du finder dig selv at bruge flere kroge i hver komponent, overbruger du dem muligvis.
React Hooks er mest nyttige, når du skal dele tilstand mellem flere komponenter. Undgå at bruge unødvendige Hooks, fordi de kan gøre din kode svær at læse, og de kan påvirke ydeevnen, hvis de bruges overdrevent.
Tilføj mere funktionalitet ved hjælp af React 18 kroge
Med udgivelsen af React 18 er der nye hooks tilgængelige. Hver krog er specifik for en bestemt React-funktion. Du kan finde en liste over alle tilgængelige kroge på Reacts hjemmeside. Men de mest brugte kroge er stadig useState og useEffect.