GebruikState vs. useReducer in React: de juiste State Management Hook kiezen

Als u een webontwikkelingsbaan wilt binnenhalen, heeft u een grotere kans van slagen als u de React JavaScript-bibliotheek leert kennen. React is een van de meest gebruikte bibliotheken in de branche. En een van de meest interessante kenmerken van de React-bibliotheek is het concept van hooks.

Hooks zijn eenvoudigweg JavaScript-functies die u isoleren en u in staat stellen logica opnieuw te gebruiken in een React-toepassing. Voor statusbeheer zijn er twee hoofdhaken voor u beschikbaar: de gebruikState haak en de gebruikVerminderaar haak.

Overzicht van de useState Hook

De gebruikState hook is de meest gebruikelijke manier om met de status in React om te gaan. De onderstaande syntaxis illustreert hoe u deze hook in uw toepassing kunt gebruiken:

const [staat, setState] = useState (initialStateValue);

In het codeblok hierboven, de staat variabele houdt gegevens in het geheugen tussen weergaven. En setState is de "setter"-functie die de staat variabel.

De gebruikState hook geeft een array terug met precies twee elementen. Het neemt ook een beginwaarde op voor de toestandsvariabele.

Als u bijvoorbeeld een toestandsvariabele wilt definiëren die de leeftijd van de gebruiker vertegenwoordigt, met een beginwaarde van 17, gaat u als volgt te werk:

const [userAge, setUserAge] = useState(17);

De setUserAge functie is verantwoordelijk voor het wijzigen van de gebruikersleeftijd staat variabele.

setUserAge(19);

Het is belangrijk op te merken dat het bijwerken van de status, het opnieuw weergeven van componenten activeert en het onjuist bijwerken van een statusvariabele kan resulteren in een oneindige lus die uw code kan breken.

In React is het niet aan te raden om de status rechtstreeks te wijzigen (zoals weergegeven in het codeblok hieronder), omdat wijzigingen in niet-statusvariabelen niet blijven bestaan ​​tussen de weergave van componenten.

gebruikerLeeftijd = 19;

De status is lokaal voor de component die deze definieert. Als dezelfde componenten meerdere keren op het scherm worden weergegeven, heeft elk onderdeel zijn eigen onafhankelijke status.

functieapp(){
opbrengst (




 </div>
 )
}

In het bovenstaande codeblok zijn er twee Schakelaar componenten, maar elke component behandelt zijn eigen toestand en vertrouwt niet op de andere component tenzij één component zijn toestand deelt met de andere component.

React handelt statusupdates af door middel van batchverwerking. Dit betekent dat wanneer u de setterfunctie van een statusvariabele aanroept, de statusvariabele pas bij de volgende herweergave wordt bijgewerkt.

Overzicht van het gebruikVerloophaak

useReducer is een React-hook dat kan van pas komen wanneer u meerdere gerelateerde statussen tegelijkertijd wilt afhandelen. De syntaxis voor gebruikVerminderaar ziet er ongeveer zo uit:

const [staat, verzending] = useReducer (reductiemiddel, initialState)

In vergelijking tot gebruikState, in gebruikVerminderaar, er is een staat variabel en een verzenden functie die acties naar de verloopstuk functie die payloads afhandelt en de staat.

Stel dat u een eenvoudige tellertoepassing bouwt met knoppen die de teller kunnen resetten, de tellerwaarde kunnen verhogen of de tellerwaarde kunnen verlagen. Gebruik makend van gebruikState je code ziet er ongeveer zo uit:

functieBalie(){
const [telling, setCount] = useState(0);
opbrengst(


 De telling is: {count}


 setCount (tel + 1)}>Aantal verhogen</button>
 setCount(0)}>Terugzetten</button>
 setCount (tel - 1)}>Aantal verlagen</button>
 </div>
 </div>
 )
}

Bovenstaande implementatie werkt perfect. Maar u kunt dezelfde resultaten ook bereiken met behulp van de gebruikVerminderaar haak.

Dit voorbeeld is eenvoudig bedoeld om aan te tonen hoe de gebruikVerminderaar haak werkt. In een real-world toepassing, gebruikVerminderaar is overdreven voor dit scenario.

gebruikVerminderaar maakt het gemakkelijker om gerelateerde statussen en complexe logica te behandelen op basis van de type doorgegeven in de verzonden actie voorwerp.

De verzendfunctie kan bijvoorbeeld een actie object dat er ongeveer zo uitziet:

{type:"actie type", lading:staat * 2}

Importeer eerst de gebruikVerminderaar hook, definieer dan de verloopstuk functie met de parameters: staat en de gedestructureerde actie voorwerp.

importeren {useReducer} van"Reageer";
functieverloopstuk(staat, { type, laadvermogen }) {
als (type 'telVerhogen') {
opbrengst lading;
 } andersals (type 'telVerminder') {
opbrengst lading;
 } andersals (type 'countReset') {
opbrengst lading;
 } anders {
opbrengst staat;
 }
}

Na het definiëren van de verloopstuk functie, kunt u de Balie onderdeel met de gebruikVerminderaar haak.

functieBalie() {
const [count, verzending] = useReducer (reductiemiddel, 0);
opbrengst (


 De telling is: {count}


 verzenden({ type: 'telVerhogen', lading: tel + 1 })}>
 Verhoog het aantal
 </button>
 verzenden({ type: 'countReset', lading: 0 })}>
 Teller resetten
 </button>
 verzenden({ type: 'telVerminder', lading: graaf - 1 })}>
 Verhoog het aantal
 </button>
 </div>
 </div>
 );
}

In het bovenstaande codeblok verzendt de eerste knop een actie van het type countVerhogen met een laadvermogen van tel + 1. Deze actie is verantwoordelijk voor het verhogen van de telwaarde.

De tweede knop verzendt een actie van het type telReset met een payload van 0 die de telwaarde terugzet naar 0.

De derde knop verzendt een actie van het type tellenVerminderen met een laadvermogen van tel - 1 waardoor de telwaarde met 1 wordt verlaagd.

Kiezen tussen useState en useReducer Hooks

Nu, dat u begrijpt hoe te gebruiken gebruikState En gebruikVerminderaar haken, is het belangrijk om te weten wanneer je de juiste moet gebruiken.

Als uw toestand geen complexe logica vereist, dan uiteraard met behulp van gebruikVerminderaar kan overdreven zijn.

Als uw toestand allesbehalve is JavaScript-primitieven zoals getallen, tekenreeksen en booleaanse waarden, moet u de gebruikState haak. En als het type status een object of een array is, dan zou je moeten overwegen om te gebruiken gebruikVerminderaar in plaats van.

Naarmate uw applicatie complexer wordt, wordt het moeilijk om de status alleen met de gebruikState En gebruikVerminderaar haken.

Dit is wanneer je kunt externe bibliotheken zoals Redux gebruiken, Jotai en Zustand. Deze bibliotheken maken het gemakkelijker om statusveranderingen over meerdere componenten te verwerken.

Staatsbeheer eenvoudiger maken met JavaScript-bibliotheken

Bibliotheken zoals React, Vue en Svelte hebben allemaal hun eigen manier om met staat om te gaan. Zelf staatsbeheer uitvoeren met vanilla JavaScript is zeker iets dat u kunt proberen, maar het is veel gemakkelijker en handiger om een ​​beproefde JavaScript-bibliotheek te gebruiken.

Als u een complexe applicatie bouwt met React waarbij u verschillende componenten moet beheren, is Redux wellicht de beste keuze voor u.