Als je nieuw bent bij React, vraag je je misschien af wat React Hooks zijn en wanneer je ze zou moeten gebruiken. React introduceerde alleen hooks in zijn 16.8-release, maar ze zijn al snel een essentieel kenmerk van de bibliotheek geworden.
Leer alles over de basisprincipes van React Hooks en ontdek enkele best practices voor het gebruik ervan in uw React-applicaties.
Wat zijn React-hooks?
Met React Hooks kun je status- en andere React-functies gebruiken zonder extra code te schrijven. Hooks zijn een geweldige manier om uw code leesbaarder en onderhoudbaarder te maken.
Er zijn een paar verschillende haken in reageren, maar de meest gebruikte zijn useState en useEffect. Met de useState hook kun je state aan je componenten toevoegen. Dit is handig voor zaken als het bijhouden van de invoer van een gebruiker of wijzigingen in een formulier. Met de hook useEffect kunt u een functie uitvoeren wanneer een component wordt weergegeven. Dit is handig voor zaken als het ophalen van gegevens uit een API of het opzetten van een abonnement.
Wanneer moet je React Hooks gebruiken?
U moet React Hooks gebruiken wanneer u extra functionaliteit aan een component wilt toevoegen. Als u bijvoorbeeld de invoer van een gebruiker moet bijhouden, gebruikt u de useState-hook. Als u gegevens van een API moet ophalen, gebruikt u de useEffect-hook. Je kan ook maak aangepaste hooks voor API-aanroepen.
Als je React net bent gaan gebruiken, hoef je Hooks misschien nog niet te gebruiken. Maar naarmate u complexere apps bouwt, zult u merken dat Hooks een geweldige manier zijn om extra functionaliteit aan uw componenten toe te voegen.
Best practices met React Hooks
Nu je weet wat React Hooks zijn en wanneer je ze moet gebruiken, laten we het hebben over enkele best practices.
1. Roep alleen Hooks aan van React-functies
Je moet React Hooks alleen aanroepen vanuit React-functies. Als je react hooks probeert aan te roepen vanuit een klassecomponent, krijg je een foutmelding.
Dit komt omdat je alleen een React Hook kunt aanroepen vanuit een React-functie. Reageerfuncties zijn componenten die u declareert met een functiesleutelwoord.
Hier is een voorbeeld van een React-functiecomponent:
importeren Reageer, { useState } van 'Reageer';functieapp() {
const [telling, setCount] = useState(0);
opbrengst (
<div>
<P>{graaf}</P>
<knop onClick={() => setCount (tel + 1)}>
Klik hier
</button>
</div>
);
}
En hier is een voorbeeld van een klassencomponent:
importeren Reageren, { Onderdeel } van 'Reageer';klasappstrekt zich uitOnderdeel{
staat = {
tel: 0
};
veroorzaken() {
opbrengst (
<div>
<P>{deze.staat.telling}</P>
<knop onClick={() => this.setState({ count: this.state.count + 1 })}>
Klik hier
</button>
</div>
);
}
}
In het eerste voorbeeld wordt de App-component gedeclareerd met behulp van het functie-trefwoord, terwijl het tweede het class-trefwoord gebruikt.
2. Gebruik slechts één useEffect Hook
Als je de useEffect hook gebruikt, zou je er maar één per component moeten gebruiken. Dit komt omdat useEffect wordt uitgevoerd wanneer een component wordt weergegeven.
Als u meerdere useEffect-hooks hebt, zullen ze allemaal worden uitgevoerd wanneer een component wordt weergegeven. Dit kan leiden tot onverwachte gedrags- en prestatieproblemen. In het onderstaande voorbeeld worden beide useEffects uitgevoerd wanneer de app-component wordt weergegeven.
importeren Reageren, { useState, useEffect } van 'Reageer';functieapp() {
const [telling, setCount] = useState(0);gebruikEffect(() => {
console.log('Dit wordt uitgevoerd wanneer de app-component wordt weergegeven!');
}, []);gebruikEffect(() => {
console.log('Dit wordt ook uitgevoerd wanneer de app-component wordt weergegeven!');
}, []);
opbrengst (
<div>
<P>{graaf}</P>
<knop onClick={() => setCount (tel + 1)}>
Klik hier
</button>
</div>
);
}
In plaats van meerdere useEffect-hooks te gebruiken, kun je een enkele useEffect-hook gebruiken en al je code erin stoppen. In het onderstaande voorbeeld wordt slechts één useEffect-hook uitgevoerd wanneer de app-component wordt weergegeven.
importeren Reageren, { useState, useEffect } van 'Reageer';functieapp() {
const [telling, setCount] = useState(0);gebruikEffect(() => {
console.log('Dit wordt uitgevoerd wanneer de app-component wordt weergegeven!');
console.log('Dit wordt ook uitgevoerd wanneer de app-component wordt weergegeven!');
}, []);
opbrengst (
<div>
<P>{graaf}</P>
<knop onClick={() => setCount (tel + 1)}>
Klik hier
</button>
</div>
);
}
Dit betekent dat je alleen React Hooks uit het eerste voorbeeld kunt aanroepen. Als je React Hooks uit het tweede voorbeeld probeert aan te roepen, krijg je een foutmelding.
3. Gebruik Hooks op het hoogste niveau
Een van de best practices met React Hooks is om ze op het hoogste niveau te gebruiken. Vermijd het gebruik van hooks binnen lussen, voorwaarden of geneste functies. Als u bijvoorbeeld State binnen een for-lus gebruikt, maakt React elke keer dat de lus wordt uitgevoerd een nieuwe statusvariabele. Dit kan leiden tot onverwacht gedrag.
importeren Reageer, { useState } van 'Reageer';functieapp() {
voor (laten ik = 0; ik < 10; ik++) {
// Doe dit niet!
const [telling, setCount] = useState(0);
}
opbrengst (
<div>
<P>{graaf}</P>
<knop onClick={() => setCount (tel + 1)}>
Klik hier
</button>
</div>
);
}
In het bovenstaande voorbeeld geeft de app-component alleen het aantal en de knop weer van de laatste iteratie van de lus. Dit komt omdat React alleen de statusvariabele van de laatste iteratie bijwerkt.
In plaats van State binnen een lus te gebruiken, kunt u een statusvariabele buiten de lus declareren. Op deze manier maakt React slechts één statusvariabele en werkt deze dienovereenkomstig bij.
importeren Reageer, { useState } van 'Reageer';functieapp() {
// Dit is de juiste manier om useState in een lus te gebruiken
const [telling, setCount] = useState(0);voor (laten ik = 0; ik < 10; ik++) {
// ...
}
opbrengst (
<div>
<P>{graaf}</P>
<knop onClick={() => setCount (tel + 1)}>
Klik hier
</button>
</div>
);
}
4. Gebruik haken niet te veel
React Hooks zijn een krachtig hulpmiddel, maar je moet ze niet te veel gebruiken. Als je merkt dat je meerdere Hooks gebruikt in elk onderdeel, gebruik je ze misschien te veel.
React Hooks zijn het handigst wanneer u de status tussen meerdere componenten moet delen. Vermijd het gebruik van onnodige hooks, omdat ze uw code moeilijk leesbaar kunnen maken en de prestaties kunnen beïnvloeden als ze overmatig worden gebruikt.
Voeg meer functionaliteit toe met behulp van React 18 Hooks
Met de release van React 18 zijn er nieuwe hooks beschikbaar. Elke hook is specifiek voor een bepaalde React-functie. Je vindt een lijst met alle beschikbare hooks op de React-website. Maar de meest gebruikte hooks zijn nog steeds useState en useEffect.