UseState vs. useReducer în React: Alegerea cârligului de management al statului potrivit

Dacă doriți să obțineți un job de dezvoltare web, ați avea șanse mai mari de a reuși dacă învățați biblioteca React JavaScript. React este una dintre cele mai utilizate biblioteci din industrie. Și una dintre cele mai interesante caracteristici ale bibliotecii React este conceptul de cârlige.

Cârligele sunt pur și simplu funcții JavaScript care izolează și vă permit să reutilizați logica într-o aplicație React. Pentru managementul de stat, aveți la dispoziție două cârlige principale— useState cârlig și utilizați Reducer cârlig.

Prezentare generală a useState Hook

The useState cârlig este cel mai comun mod de a gestiona starea în React. Sintaxa de mai jos ilustrează cum să utilizați acest cârlig în aplicația dvs.:

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

În blocul de cod de mai sus, stat variabila păstrează datele în memorie între randări. Și setState este funcția „setter” care manipulează stat variabil.

The useState hook returnează o matrice cu exact două elemente. De asemenea, ia o valoare inițială pentru variabila de stare.

De exemplu, dacă doriți să definiți o variabilă de stare care să reprezinte vârsta utilizatorului, cu o valoare inițială de 17, așa ați proceda:

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

The setUserAge funcția este responsabilă pentru modificarea userAge variabilă de stare.

setUserAge(19);

Este important de reținut că actualizarea stării, declanșează o redare a componentei și actualizarea necorespunzătoare a unei variabile de stare poate duce la o buclă infinită care vă poate rupe codul.

În React, nu este recomandabil să modificați starea direct (după cum se arată în blocul de cod de mai jos), deoarece modificările la variabilele non-state nu persistă între randările componente.

userAge = 19;

Statul este local componentului care îl definește. Dacă aveți aceleași componente redate pe ecran de mai multe ori, fiecare componentă va avea propria sa stare independentă.

funcţieApp(){
întoarcere (




 </div>
 )
}

În blocul de cod de mai sus, există două Intrerupator componente, dar fiecare componentă se ocupă de propria sa stare și nu se bazează pe cealaltă componentă decât dacă o componentă își împarte starea cu cealaltă componentă.

React gestionează actualizările de stare prin loturi. Aceasta înseamnă că atunci când apelați funcția de setare a unei variabile de stare, variabila de stare nu este actualizată până la următoarea redare.

Prezentare generală a cârligului useReducer

useReducer este un cârlig React care poate fi util ori de câte ori doriți să gestionați mai multe stări asociate în același timp. Sintaxa pentru utilizați Reducer arata cam asa:

const [state, dispatch] = useReducer (reductor, initialState)

Comparativ cu useState, în utilizați Reducer, este un stat variabilă și a expediere funcție care trimite acțiuni până la reductor funcție care gestionează sarcinile utile și actualizează stat.

De exemplu, să presupunem că construiți o aplicație simplă de contor cu butoane care pot reseta contorul, crește valoarea contorului sau scădea valoarea contorului. Folosind useState codul tău va arăta cam așa:

funcţieTejghea(){
const [număr, setCount] = useState(0);
întoarcere(


 Numărul este: {count}


 setCount (număr + 1)}>Măriți numărul</button>
 setCount(0)}>Resetează</button>
 setCount (număr - 1)}>Scăderea numărului</button>
 </div>
 </div>
 )
}

Implementarea de mai sus funcționează perfect. Dar puteți obține aceleași rezultate și cu ajutorul utilizați Reducer cârlig.

Acest exemplu este pur și simplu menit să demonstreze modul în care utilizați Reducer cârligul funcționează. Într-o aplicație din lumea reală, utilizați Reducer este exagerat pentru acest scenariu.

utilizați Reducer facilitează gestionarea stărilor asociate și a logicii complexe bazate pe tip a trecut în expediat acțiune obiect.

De exemplu, funcția de expediere ar putea trimite un acțiune obiect care arată cam așa:

{tip:"action_type", încărcătură utilă:stat * 2}

Mai întâi importați utilizați Reducer cârlig, apoi definiți reductor functioneaza cu parametrii: stat si cei destructurati acțiune obiect.

import {useReducer} din"reacţiona";
funcţiereductor(stare, { tip, sarcină utilă }) {
dacă (tip „număr creștere”) {
întoarcere încărcătură utilă;
 } altfeldacă (tip 'countDecrease') {
întoarcere încărcătură utilă;
 } altfeldacă (tip 'countReset') {
întoarcere încărcătură utilă;
 } altfel {
întoarcere stat;
 }
}

După definirea reductor funcția, puteți construi Tejghea componentă cu utilizați Reducer cârlig.

funcţieTejghea() {
const [număr, expediere] = useReducer (reductor, 0);
întoarcere (


 Numărul este: {count}


 expediere({ tip: „număr creștere”, încărcătură utilă: numără + 1 })}>
 Creșteți numărul
 </button>
 expediere({ tip: 'countReset', încărcătură utilă: 0 })}>
 Resetați numărul
 </button>
 expediere({ tip: 'countDecrease', încărcătură utilă: numara - 1 })}>
 Creșteți numărul
 </button>
 </div>
 </div>
 );
}

În blocul de cod de mai sus, primul buton trimite o acțiune de tip countIncrease cu o sarcină utilă de numără + 1. Această acțiune este responsabilă pentru creșterea valorii numărului.

Al doilea buton trimite o acțiune de tip countReset cu o sarcină utilă de 0, care resetează valoarea de numărare la 0.

Al treilea buton trimite o acțiune de tip countDecrease cu o sarcină utilă de numără - 1 care scade valoarea numărului cu 1.

Alegerea între useState și useReducer Hooks

Acum, că înțelegi cum să folosești useState și utilizați Reducer cârlige, este important să știți când să îl folosiți pe cel potrivit.

Dacă starea dvs. nu necesită o logică complexă, atunci evident că folosiți utilizați Reducer poate fi exagerat.

Dacă starea ta este altceva decât Primitive JavaScript cum ar fi numerele, șirurile de caractere și valorile booleene, ar trebui să utilizați useState cârlig. Și dacă tipul de stare este un obiect sau o matrice, atunci ar trebui să luați în considerare utilizarea utilizați Reducer in schimb.

Pe măsură ce aplicația dvs. crește în complexitate, devine dificil să gestionați starea doar cu useState și utilizați Reducer cârlige.

Acesta este momentul în care puteți folosi biblioteci externe precum Redux, Jotai și Zustand. Aceste biblioteci facilitează gestionarea schimbărilor de stare în mai multe componente.

Administrarea statului este mai ușoară cu bibliotecile JavaScript

Bibliotecile precum React, Vue și Svelte au toate propriile moduri de a gestiona starea. Gestionarea propriei gestionări a stării cu JavaScript vanilla este cu siguranță ceva ce poți încerca, dar este mult mai ușor și mai convenabil să folosești o bibliotecă JavaScript testată în luptă.

Dacă construiți o aplicație complexă folosind React în care trebuie să gestionați mai multe componente, Redux ar putea fi cea mai bună alegere pentru dvs.