Om du är ny på React kanske du undrar vad React Hooks är och när du ska använda dem. React introducerade bara krokar i sin 16.8-version, men de har snabbt blivit en viktig funktion i biblioteket.
Lär dig allt om grunderna i React Hooks och upptäck några bästa metoder för att använda dem i dina React-applikationer.
Vad är React Hooks?
React Hooks låter dig använda tillstånd och andra React-funktioner utan att skriva extra kod. Hooks är ett bra sätt att göra din kod mer läsbar och underhållbar.
Det finns några olika krokar i React, men de vanligaste är useState och useEffect. UseState-kroken låter dig lägga till tillstånd till dina komponenter. Detta är användbart för saker som att hålla reda på en användares input eller ändringar i ett formulär. UseEffect-kroken låter dig köra en funktion närhelst en komponent renderas. Detta är användbart för saker som att hämta data från ett API eller ställa in en prenumeration.
När ska du använda React Hooks?
Du bör använda React Hooks när du behöver lägga till extra funktionalitet till en komponent. Till exempel, om du behöver hålla reda på en användares inmatning, skulle du använda useState-kroken. Om du behöver hämta data från ett API skulle du använda useEffect-kroken. Du kan också
skapa anpassade krokar för API-anrop.Om du precis börjat använda React kanske du inte behöver använda Hooks ännu. Men när du bygger mer komplexa appar kommer du att upptäcka att Hooks är ett utmärkt sätt att lägga till extra funktionalitet till dina komponenter.
Bästa praxis med React Hooks
Nu när du vet vad React Hooks är och när du ska använda dem, låt oss prata om några bästa praxis.
1. Endast anropskrokar från React-funktioner
Du bör endast anropa React Hooks från React-funktioner. Om du försöker anropa react hooks från en klasskomponent får du ett felmeddelande.
Detta beror på att du bara kan anropa en React Hook från en React-funktion. React-funktioner är komponenter som du deklarerar med ett funktionsnyckelord.
Här är ett exempel på en React-funktionskomponent:
importera Reagera, { useState } från 'reagera';fungeraApp() {
konst [count, setCount] = useState(0);
lämna tillbaka (
<div>
<sid>{räkna}</s>
<knappen onClick={() => setCount (count + 1)}>
Klicka här
</button>
</div>
);
}
Och här är ett exempel på en klasskomponent:
importera Reagera, { Komponent } från 'reagera';klassAppsträcker sigKomponent{
tillstånd = {
antal: 0
};
framställa() {
lämna tillbaka (
<div>
<sid>{this.state.count}</s>
<knappen onClick={() => this.setState({ count: this.state.count + 1 })}>
Klicka här
</button>
</div>
);
}
}
Det första exemplet deklarerar App-komponenten med funktionsnyckelordet, medan det andra använder klassnyckelordet.
2. Använd endast en användningseffektkrok
Om du använder useEffect-kroken bör du bara använda en per komponent. Detta beror på att useEffect körs när en komponent renderas.
Om du har flera useEffect-hooks kommer de alla att köras när en komponent renderas. Detta kan leda till oväntade beteende- och prestationsproblem. I exemplet nedan kommer båda useEffects att köras när appkomponenten renderas.
importera Reagera, { useState, useEffect } från 'reagera';fungeraApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Detta kommer att köras när appkomponenten renderas!');
}, []);useEffect(() => {
console.log('Detta kommer också att köras när appkomponenten renderas!');
}, []);
lämna tillbaka (
<div>
<sid>{räkna}</s>
<knappen onClick={() => setCount (count + 1)}>
Klicka här
</button>
</div>
);
}
Istället för att använda flera useEffect-krokar kan du använda en enda useEffect-hook och lägga all din kod i den. I exemplet nedan kommer endast en useEffect-hook att köras när app-komponenten renderas.
importera Reagera, { useState, useEffect } från 'reagera';fungeraApp() {
konst [count, setCount] = useState(0);useEffect(() => {
console.log('Detta kommer att köras när appkomponenten renderas!');
console.log('Detta kommer också att köras när appkomponenten renderas!');
}, []);
lämna tillbaka (
<div>
<sid>{räkna}</s>
<knappen onClick={() => setCount (count + 1)}>
Klicka här
</button>
</div>
);
}
Det betyder att du bara kan anropa React Hooks från det första exemplet. Om du försöker ringa React Hooks från det andra exemplet får du ett felmeddelande.
3. Använd krokar på toppnivå
En av de bästa metoderna med React Hooks är att använda dem på toppnivå. Du bör undvika att använda krokar inuti slingor, villkor eller kapslade funktioner. Till exempel, om du använderState inuti en for-loop, kommer React att skapa en ny tillståndsvariabel varje gång loopen körs. Detta kan leda till oväntat beteende.
importera Reagera, { useState } från 'reagera';fungeraApp() {
för (låta jag = 0; jag < 10; i++) {
// Gör inte det här!
konst [count, setCount] = useState(0);
}
lämna tillbaka (
<div>
<sid>{räkna}</s>
<knappen onClick={() => setCount (count + 1)}>
Klicka här
</button>
</div>
);
}
I exemplet ovan kommer appkomponenten bara att återge räkningen och knappen från den slutliga iterationen av loopen. Detta beror på att React endast uppdaterar tillståndsvariabeln från den senaste iterationen.
Istället för att användaState i en loop kan du deklarera en tillståndsvariabel utanför loopen. På så sätt kommer React bara att skapa en tillståndsvariabel och uppdatera den därefter.
importera Reagera, { useState } från 'reagera';fungeraApp() {
// Detta är det korrekta sättet att använda useState i en loop
konst [count, setCount] = useState(0);för (låta jag = 0; jag < 10; i++) {
// ...
}
lämna tillbaka (
<div>
<sid>{räkna}</s>
<knappen onClick={() => setCount (count + 1)}>
Klicka här
</button>
</div>
);
}
4. Överanvänd inte krokar
React Hooks är ett kraftfullt verktyg, men du bör undvika att överanvända dem. Om du märker att du använder flera krokar i varje komponent, kanske du överanvänder dem.
React Hooks är mest användbara när du behöver dela tillstånd mellan flera komponenter. Undvik att använda onödiga Hooks eftersom de kan göra din kod svår att läsa, och de kan påverka prestandan om de används överdrivet.
Lägg till mer funktionalitet med hjälp av React 18-krokar
Med lanseringen av React 18 finns det nya krokar tillgängliga. Varje krok är specifik för en viss React-funktion. Du kan hitta en lista över alla tillgängliga krokar på Reacts webbplats. Men de mest använda krokarna är fortfarande useState och useEffect.
