Hvis du er ny på React, lurer du kanskje på hva React Hooks er og når du bør bruke dem. React introduserte bare kroker i 16.8-utgivelsen, men de har raskt blitt en viktig funksjon i biblioteket.
Lær alt om det grunnleggende om React Hooks og oppdag noen beste fremgangsmåter for å bruke dem i React-applikasjonene dine.
Hva er React Hooks?
React Hooks lar deg bruke tilstand og andre React-funksjoner uten å skrive ekstra kode. Hooks er en fin måte å gjøre koden din mer lesbar og vedlikeholdbar på.
Det er noen få forskjellige kroker i React, men de mest brukte er useState og useEffect. UseState-kroken lar deg legge til tilstand til komponentene dine. Dette er nyttig for ting som å holde styr på en brukers input eller endringer i et skjema. UseEffect-kroken lar deg kjøre en funksjon hver gang en komponent gjengis. Dette er nyttig for ting som å hente data fra en API eller sette opp et abonnement.
Når bør du bruke React Hooks?
Du bør bruke React Hooks når du trenger å legge til ekstra funksjonalitet til en komponent. For eksempel, hvis du trenger å holde styr på en brukers input, vil du bruke useState-kroken. Hvis du trenger å hente data fra et API, vil du bruke useEffect-kroken. Du kan også
lage tilpassede kroker for API-anrop.Hvis du nettopp har begynt å bruke React, trenger du kanskje ikke bruke Hooks ennå. Men etter hvert som du bygger mer komplekse apper, vil du oppdage at Hooks er en fin måte å legge til ekstra funksjonalitet til komponentene dine.
Beste praksis med React Hooks
Nå som du vet hva React Hooks er og når du skal bruke dem, la oss snakke om noen beste fremgangsmåter.
1. Bare anropskroker fra React-funksjoner
Du bør kun kalle React Hooks fra React-funksjoner. Hvis du prøver å ringe react hooks fra en klassekomponent, får du en feilmelding.
Dette er fordi du kun kan ringe en React Hook fra en React-funksjon. React-funksjoner er komponenter som du deklarerer med et funksjonsnøkkelord.
Her er et eksempel på en React-funksjonskomponent:
import Reager, { useState } fra 'reagere';funksjonApp() {
konst [count, setCount] = useState(0);
komme tilbake (
<div>
<s>{telle}</s>
<knapp påKlikk={() => setCount (tell + 1)}>
Klikk på meg
</button>
</div>
);
}
Og her er et eksempel på en klassekomponent:
import Reager, { Komponent } fra 'reagere';klasseAppstrekkerKomponent{
tilstand = {
teller: 0
};
render() {
komme tilbake (
<div>
<s>{this.state.count}</s>
<knapp påKlikk={() => this.setState({ count: this.state.count + 1 })}>
Klikk på meg
</button>
</div>
);
}
}
Det første eksemplet erklærer App-komponenten ved å bruke funksjonsnøkkelordet, mens det andre bruker klassenøkkelordet.
2. Bruk kun én brukseffektkrok
Hvis du bruker useEffect-kroken, bør du bare bruke én per komponent. Dette er fordi useEffect kjører hver gang en komponent gjengis.
Hvis du har flere useEffect-hooks, vil de alle kjøre når en komponent gjengis. Dette kan føre til uventet atferd og ytelsesproblemer. I eksemplet nedenfor vil begge useEffects kjøre når app-komponenten gjengis.
import Reager, { useState, useEffect } fra 'reagere';funksjonApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Dette vil kjøre når app-komponenten gjengis!');
}, []);useEffect(() => {
console.log('Dette vil også kjøre når app-komponenten gjengis!');
}, []);
komme tilbake (
<div>
<s>{telle}</s>
<knapp påKlikk={() => setCount (tell + 1)}>
Klikk på meg
</button>
</div>
);
}
I stedet for å bruke flere useEffect-kroker, kan du bruke en enkelt useEffect-krok og legge all koden din i den. I eksemplet nedenfor vil bare én useEffect-hook kjøre når app-komponenten gjengis.
import Reager, { useState, useEffect } fra 'reagere';funksjonApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Dette vil kjøre når app-komponenten gjengis!');
console.log('Dette vil også kjøre når app-komponenten gjengis!');
}, []);
komme tilbake (
<div>
<s>{telle}</s>
<knapp påKlikk={() => setCount (tell + 1)}>
Klikk på meg
</button>
</div>
);
}
Dette betyr at du kun kan ringe React Hooks fra det første eksemplet. Hvis du prøver å ringe React Hooks fra det andre eksemplet, får du en feilmelding.
3. Bruk kroker på toppnivå
En av de beste praksisene med React Hooks er å bruke dem på toppnivå. Du bør unngå å bruke kroker inne i løkker, betingelser eller nestede funksjoner. For eksempel, hvis du brukerState inne i en for-løkke, vil React opprette en ny tilstandsvariabel hver gang løkken kjører. Dette kan føre til uventet oppførsel.
import Reager, { useState } fra 'reagere';funksjonApp() {
til (la jeg = 0; jeg < 10; i++) {
// Ikke gjør dette!
konst [count, setCount] = useState(0);
}
komme tilbake (
<div>
<s>{telle}</s>
<knapp påKlikk={() => setCount (tell + 1)}>
Klikk på meg
</button>
</div>
);
}
I eksemplet ovenfor vil app-komponenten bare gjengi tellingen og knappen fra den siste iterasjonen av løkken. Dette er fordi React kun oppdaterer tilstandsvariabelen fra siste iterasjon.
I stedet for å brukeState inne i en løkke, kan du erklære en tilstandsvariabel utenfor løkken. På denne måten vil React bare opprette én tilstandsvariabel og oppdatere den deretter.
import Reager, { useState } fra 'reagere';funksjonApp() {
// Dette er den riktige måten å bruke useState inne i en loop
konst [count, setCount] = useState(0);til (la jeg = 0; jeg < 10; i++) {
// ...
}
komme tilbake (
<div>
<s>{telle}</s>
<knapp påKlikk={() => setCount (tell + 1)}>
Klikk på meg
</button>
</div>
);
}
4. Ikke overbruk kroker
React Hooks er et kraftig verktøy, men du bør unngå å overbruke dem. Hvis du finner deg selv å bruke flere kroker i hver komponent, kan det hende du overbruker dem.
React Hooks er mest nyttige når du trenger å dele tilstand mellom flere komponenter. Unngå å bruke unødvendige kroker fordi de kan gjøre koden din vanskelig å lese, og de kan påvirke ytelsen hvis de brukes overdrevent.
Legg til mer funksjonalitet ved å bruke React 18-kroker
Med utgivelsen av React 18 er det nye kroker tilgjengelig. Hver krok er spesifikk for en bestemt React-funksjon. Du kan finne en liste over alle tilgjengelige kroker på React-nettstedet. Men de mest brukte krokene er fortsatt useState og useEffect.