Förvirrad mellan useState och useReducer i React? Upptäck den bästa tillståndshanteringskroken för dina behov i den här användbara guiden.
Om du vill få ett webbutvecklingsjobb skulle du ha större chans att lyckas om du lär dig React JavaScript-biblioteket. React är ett av de mest använda biblioteken i branschen. Och en av de mest intressanta funktionerna i React-biblioteket är konceptet med krokar.
Hooks är helt enkelt JavaScript-funktioner som isolerar och gör att du kan återanvända logik i en React-applikation. För statlig förvaltning finns det två huvudsakliga krokar tillgängliga för dig - den useState krok och användReducer krok.
Översikt över useState Hook
De useState hook är det vanligaste sättet att hantera tillstånd i React. Syntaxen nedan illustrerar hur du använder denna krok i din applikation:
konst [state, setState] = useState (initialStateValue);
I kodblocket ovan visas stat variabeln håller data i minnet mellan renderingarna. Och setState är "setter"-funktionen som manipulerar stat variabel.
De useState hook returnerar en array med exakt två element. Den tar också in ett initialvärde för tillståndsvariabeln.
Om du till exempel vill definiera en tillståndsvariabel som representerar användarens ålder, med ett initialt värde på 17, är det så här du skulle göra det:
konst [userAge, setUserAge] = useState(17);
De setUserAge funktionen ansvarar för att modifiera användarålder tillståndsvariabel.
setUserAge(19);
Det är viktigt att notera att uppdatering av tillståndet, utlöser en komponentåtergivning och felaktig uppdatering av en tillståndsvariabel kan resultera i en oändlig loop som kan bryta din kod.
I React är det inte tillrådligt att modifiera tillståndet direkt (som visas i kodblocket nedan), eftersom ändringar av icke-tillståndsvariabler inte kvarstår mellan komponentrenderingar.
användarålder = 19;
Staten är lokal för den komponent som definierar den. Om du har samma komponenter renderade på skärmen flera gånger, kommer varje komponent att ha sitt eget oberoende tillstånd.
fungeraApp(){
lämna tillbaka (
</div>
)
}
I kodblocket ovan finns det två Växla komponenter, men varje komponent hanterar sitt eget tillstånd och förlitar sig inte på den andra komponenten om inte en komponent delar sitt tillstånd med den andra komponenten.
React hanterar tillståndsuppdateringar genom batchning. Detta innebär att när du anropar en tillståndsvariabels sätterfunktion, uppdateras inte tillståndsvariabeln förrän nästa återrendering.
Översikt över användningen Reducer Hook
useReducer är en React-krok som kan vara praktiskt när du vill hantera flera relaterade tillstånd samtidigt. Syntaxen för användReducer ser ut ungefär så här:
konst [tillstånd, sändning] = useReducer (reducer, initialState)
Jämfört med useState, i användReducer, det finns en stat variabel och a avsändande funktion som skickar åtgärder upp till reducerare funktion som hanterar nyttolaster och uppdaterar stat.
Låt oss till exempel säga att du bygger en enkel räknarapplikation med knappar som kan nollställa räknaren, öka räknarvärdet eller minska räknarvärdet. Använder sig av useState din kod kommer att se ut ungefär så här:
fungeraDisken(){konst [count, setCount] = useState(0);
lämna tillbaka(
Antalet är: {count}
Ovanstående implementering fungerar perfekt. Men du kan också uppnå samma resultat med hjälp av användReducer krok.
Detta exempel är helt enkelt menat att visa hur användReducer krok fungerar. I en verklig applikation, användReducer är överdrivet för detta scenario.
användReducer gör det lättare att hantera relaterade tillstånd och komplex logik baserad på typ passerade i den utsända handling objekt.
Till exempel kan sändningsfunktionen skicka en handling objekt som ser ut ungefär så här:
{typ:"action_type", nyttolast:stat * 2}
Importera först användReducer krok, definiera sedan reducerare fungerar med parametrarna: stat och det destrukturerade handling objekt.
importera {useReducer} från"reagera";
fungerareducerare(tillstånd, { typ, nyttolast }) {
om (typ 'antal Öka') {
lämna tillbaka nyttolast;
} annanom (typ 'countDecrease') {
lämna tillbaka nyttolast;
} annanom (typ 'countReset') {
lämna tillbaka nyttolast;
} annan {
lämna tillbaka stat;
}
}
Efter att ha definierat reducerare funktion kan du bygga Disken komponent med användReducer krok.
fungeraDisken() {
konst [count, dispatch] = useReducer (reducer, 0);
lämna tillbaka (
Antalet är: {count}
I kodblocket ovan skickar den första knappen en åtgärd av typen antal Öka med en nyttolast på räkna + 1. Denna åtgärd är ansvarig för att öka räknevärdet.
Den andra knappen skickar en åtgärd av typen countReset med en nyttolast på 0 vilket återställer räknevärdet till 0.
Den tredje knappen skickar en åtgärd av typen räkna Minska med en nyttolast på räkna - 1 vilket minskar räknevärdet med 1.
Att välja mellan useState och useReducer Hooks
Nu när du förstår hur man använder useState och användReducer krokar är det viktigt att veta när man ska använda rätt.
Om ditt tillstånd inte kräver komplex logik, använd uppenbarligen användReducer kan vara överdrivet.
Om din stat är något annat än JavaScript-primitiver som siffror, strängar och booleska värden, bör du använda useState krok. Och om typen av tillstånd är ett objekt eller en array, bör du överväga att använda användReducer istället.
När din applikation växer i komplexitet blir det svårt att hantera tillstånd med bara useState och användReducer krokar.
Det är när du kan använda externa bibliotek som Redux, Jotai och Zustand. Dessa bibliotek gör det lättare att hantera tillståndsändringar över flera komponenter.
Gör tillståndshantering enklare med JavaScript-bibliotek
Bibliotek som React, Vue och Svelte har alla sina egna sätt att hantera tillstånd. Att hantera tillståndshantering på egen hand med vanilla JavaScript är definitivt något du kan försöka, men det är mycket enklare och bekvämare att använda ett stridstestat JavaScript-bibliotek.
Om du bygger en komplex applikation med hjälp av React där du behöver hantera flera komponenter kan Redux vara det bästa valet för dig.