UseState vs. useReducer in React: Oikean tilanhallintakoukun valitseminen

Jos haluat saada web-kehitystyön, sinulla on paremmat mahdollisuudet menestyä, jos opit React JavaScript -kirjaston. React on yksi alan eniten käytetyistä kirjastoista. Ja yksi React-kirjaston mielenkiintoisimmista ominaisuuksista on koukkujen käsite.

Koukut ovat yksinkertaisesti JavaScript-toimintoja, jotka eristävät ja mahdollistavat logiikan uudelleenkäytön React-sovelluksessa. Valtionhallinnassa on käytettävissäsi kaksi pääkoukkua - useState koukku ja useReducer koukku.

Yleiskatsaus käyttöönState Hookista

The useState koukku on yleisin tapa käsitellä tilaa Reactissa. Alla oleva syntaksi havainnollistaa, kuinka tätä koukkua käytetään sovelluksessasi:

konst [tila, setState] = useState (initialStateValue);

Yllä olevassa koodilohkossa osavaltio muuttuja pitää tiedot muistissa renderöintien välillä. Ja setState on "setter"-toiminto, joka manipuloi osavaltio muuttuja.

The useState hook palauttaa taulukon, jossa on täsmälleen kaksi elementtiä. Se ottaa myös tilamuuttujan alkuarvon.

Jos esimerkiksi haluat määrittää tilamuuttujan, joka edustaa käyttäjän ikää ja jonka alkuarvo on 17, teet sen seuraavasti:

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

The setUserAge toiminto on vastuussa muuttamisesta käyttäjän ikä tilamuuttuja.

setUserAge(19);

On tärkeää huomata, että tilan päivittäminen, komponenttien uudelleenhahmontamisen käynnistäminen ja tilamuuttujan virheellinen päivittäminen voi johtaa äärettömään silmukkaan, joka voi rikkoa koodisi.

Reactissa tilaa ei kannata muokata suoraan (kuten alla olevassa koodilohkossa näkyy), koska muutokset ei-tilamuuttujiin eivät säily komponenttien esitysten välillä.

käyttäjän Ikä = 19;

Tila on paikallinen sen määrittävälle komponentille. Jos samat komponentit esitetään näytöllä useita kertoja, jokaisella komponentilla on oma itsenäinen tilansa.

toimintoSovellus(){
palata (




 </div>
 )
}

Yllä olevassa koodilohkossa on kaksi Vaihtaa komponentit, mutta jokainen komponentti käsittelee oman tilansa eikä ole riippuvainen toisesta komponentista, ellei yksi komponentti jaa tilaansa toisen komponentin kanssa.

React käsittelee tilapäivitykset eräajoin. Tämä tarkoittaa, että kun kutsut tilamuuttujan asetusfunktiota, tilamuuttuja päivitetään vasta seuraavan uudelleenrenderöinnin yhteydessä.

Yleiskatsaus käyttöönReducer Hook

useReducer on React-koukku josta voi olla hyötyä aina, kun haluat käsitellä useita toisiinsa liittyviä tiloja samanaikaisesti. Syntaksi kohteelle useReducer näyttää jotain tältä:

konst [tila, lähetys] = useReducer (reducer, originalState)

Verrattuna useState, sisään useReducer, Tuolla on osavaltio muuttuja ja a lähettää toiminto, joka lähettää toiminnot vähennin toiminto, joka käsittelee hyötykuormia ja päivittää osavaltio.

Oletetaan esimerkiksi, että olet rakentamassa yksinkertaista laskurisovellusta painikkeilla, jotka voivat nollata laskurin, suurentaa laskurin arvoa tai pienentää laskurin arvoa. Käyttämällä useState koodisi näyttää suunnilleen tältä:

toimintoLaskuri(){
konst [count, setCount] = useState(0);
palata(


 Lukumäärä on: {count}


 setCount (count + 1)}>Kasvata määrää</button>
 setCount(0)}>Palauta</button>
 setCount (count - 1)}>Vähennä määrää</button>
 </div>
 </div>
 )
}

Yllä oleva toteutus toimii täydellisesti. Mutta voit myös saavuttaa samat tulokset käyttämällä useReducer koukku.

Tämän esimerkin tarkoituksena on yksinkertaisesti osoittaa, kuinka useReducer koukku toimii. Tosimaailman sovelluksessa useReducer on ylivoimainen tähän skenaarioon.

useReducer helpottaa toisiinsa liittyvien tilojen ja monimutkaisen logiikan käsittelyä tyyppi mennyt lähetettynä toiminta esine.

Esimerkiksi lähetystoiminto voisi lähettää toiminta objekti, joka näyttää tältä:

{tyyppi:"toimintatyyppi", hyötykuorma:state * 2}

Tuo ensin useReducer koukku, määritä sitten vähennin funktio parametreilla: osavaltio ja tuhoutuneita toiminta esine.

tuonti {useReducer} alkaen"reagoi";
toimintovähennin(tila, { tyyppi, hyötykuorma }) {
jos (tyyppi 'countIncrease') {
palata hyötykuorma;
 } muujos (tyyppi 'countDecrease') {
palata hyötykuorma;
 } muujos (tyyppi "countReset") {
palata hyötykuorma;
 } muu {
palata osavaltio;
 }
}

Määrittämisen jälkeen vähennin toiminnon, voit rakentaa Laskuri komponentin kanssa useReducer koukku.

toimintoLaskuri() {
konst [count, dispatch] = useReducer (reducer, 0);
palata (


 Lukumäärä on: {count}


 lähettää({ tyyppi: 'countIncrease', hyötykuorma: laske + 1 })}>
 Lisää määrää
 </button>
 lähettää({ tyyppi: "countReset", hyötykuorma: 0 })}>
 Nollaa laskuri
 </button>
 lähettää({ tyyppi: 'countDecrease', hyötykuorma: Kreivi - 1 })}>
 Lisää määrää
 </button>
 </div>
 </div>
 );
}

Yllä olevassa koodilohkossa ensimmäinen painike lähettää tyypin toiminnon countLisäys hyötykuorman kanssa laske + 1. Tämä toiminto on vastuussa laskenta-arvon kasvattamisesta.

Toinen painike lähettää tyypin toiminnon countReset hyötykuormalla 0, joka nollaa laskenta-arvon takaisin nollaan.

Kolmas painike lähettää tyypin toiminnon countPienennä hyötykuorman kanssa laskea - 1 mikä pienentää laskenta-arvoa yhdellä.

Valitse useState- ja useReducer Hooks -koukkujen välillä

Nyt kun ymmärrät kuinka käyttää useState ja useReducer koukkuja, on tärkeää tietää, milloin käyttää oikeaa.

Jos tilasi ei vaadi monimutkaista logiikkaa, niin tietysti käyttämällä useReducer voi olla ylivoimaista.

Jos tilasi on kaikkea muuta kuin JavaScript-primitiivit, kuten numerot, merkkijonot ja loogiset arvot, sinun tulee käyttää useState koukku. Ja jos tilatyyppi on objekti tai taulukko, sinun tulee harkita sen käyttöä useReducer sen sijaan.

Sovelluksesi monimutkaisuuden kasvaessa on vaikeaa käsitellä tilaa vain useState ja useReducer koukut.

Tämä on kun voit käyttää ulkoisia kirjastoja, kuten Redux, Jotai ja Zustand. Nämä kirjastot helpottavat useiden komponenttien tilanmuutosten käsittelyä.

Valtionhallinnan helpottaminen JavaScript-kirjastojen avulla

Kirjastoilla, kuten React, Vue ja Svelte, on kaikilla oma tapansa käsitellä tilaa. Tilanhallinnan omatoiminen hoitaminen vanilja-JavaScriptilla on ehdottomasti jotain, jota voit yrittää, mutta on paljon helpompaa ja kätevämpää käyttää taistelutestattua JavaScript-kirjastoa.

Jos rakennat Reactilla monimutkaista sovellusta, jossa sinun on hallittava useita komponentteja, Redux saattaa olla sinulle paras valinta.