Mi az állam?
Mielőtt mélyen belemerülnénk a useState hook-ba, először értsük meg a kifejezést állapot.
Az állapot információt jelent valamiről egy adott időpontban.
Vegyünk például egy szövegdobozt.
Kezdetben ebben a szövegdobozban nincs semmi, így az állapota az üres. Tegyük fel, hogy elkezdi beírni a Hello szót a szövegdobozba, és minden egyes gombnyomásra megváltozik a szövegdoboz állapota. Először „H”, majd „He”, majd „Hel” lesz, és így tovább, amíg nem lesz „Hello”.
Azt is vegye figyelembe, hogy gépelés közben nem veszíti el az előző értéket. Ha megnyomja a „H” billentyűt, majd az „e”-t, akkor „He”-t kap, nem csak „e”-t. Más szavakkal, az államot úgy képzelheti el, mint a emlékezet a szövegdobozból.
Állapot szükségessége egy React komponensben.
Értsük meg ezt egy példa segítségével.
Itt van egy Kattintson a Számláló gombra komponens, amely megjeleníti a Növelés gombra kattintások számát.
Használunk a helyi változó „számláló” hogy számolja a kattintásokat.
Minden alkalommal, amikor a Növelés gombra kattintunk, fogantyúKattintson függvény meghívásra kerül. Ez a funkció 1-gyel növeli a számláló értékét, és naplózza az értéket a konzolon.
Folytassa, kattintson a Növelés gombra a CodeSandbox előnézetében.
Nem történt semmi?
Nos, logikánk helyesnek tűnik. A konzolban (CodeSandbox) naplózott érték minden kattintáskor megfelelően frissül, de miért nem jelenik meg ez a frissítés a felhasználói felületen?
Ez a React működésének köszönhető.
- A helyi változók módosítása nem váltja ki az újbóli megjelenítést.
- Az újrarenderelés során egy komponens a semmiből jön létre, azaz egy komponens funkciója (ebben a példában ez a ClickCounter függvény) ismét végrehajtódik. Mivel a változók (például a számláló) lokálisak a függvényben, korábbi értékeik elvesznek.
Tehát hogyan tudjuk a komponenst megjegyezni a megjelenítések között?
Igen, jól értetted! Ezt a segítségével tesszük meg a useState horog.
A useState horog
A useState hook olyan mechanizmusokat biztosít, amelyek megőrzik az állapotot és elindítják az újrarenderelést.
Nézzük a használatát.
import React, { useState } from "react";
const state = useState(initialValue);
// OR
const state = React.useState(initialValue);
A useState hook egy tömböt ad vissza, amely két elemet tartalmaz:
- A állapotváltozó amely megőrzi értékeit az újrarenderelések során. A useState számára átadott kezdeti érték az állapotváltozóhoz van rendelve az első renderelés során.
- A beállító funkció amely frissíti az állapotváltozót, és egy újbóli megjelenítést is kivált.
const state = useState(0);
const data = state[0];
const setData = state[1];
<p></p> tömb destrukturálása , a fenti állításokat egyetlen állítássá alakíthatjuk át, az alábbiak szerint:
const [data, setData] = useState(0);
A useState számára átadott kezdeti érték csak az első megjelenítés során kerül felhasználásra. Újbóli megjelenítésnél figyelmen kívül hagyja.
Számláló a useState-tel
Most frissítsük a korábbi számlálópéldát a useState horoggal.
- Mivel szükségünk van a számláló értékére az újrarenderelések között, alakítsuk át állapottá.
const [counter, setCounter] = useState(0);
- A setCounter meghívása a handleClick funkción belül.
const handleClick = () => {
setCounter(counter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
A setCounter funkció 1-gyel frissíti a számláló értékét, és újbóli megjelenítést indít el. Amikor az összetevő függvényét újrarendereljük, a useState által visszaadott állapotváltozó frissített értéket fog kapni.
Próbálja ki a CodeSandboxot a frissített kóddal. Kattintson a Növekedés gombra, és nézze meg a useState varázslatát működés közben.
Ezt a funkcionális komponens újrarenderelésével ellenőrizheti Kattintson a Számláló gombra újra meghívásra kerül a konzolnaplók megtekintésekor. A komponens elejéhez hozzáadott „ClickCounter start” napló minden renderelésnél naplózásra kerül.
Frissítő funkció
Tegyük fel, hogy minden kattintásnál 4-gyel szeretnénk növelni a számláló értékét.
const handleClick = () => {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
Tegyük fel, hogy a számláló kezdeti értéke 0. Mit vársz, ha a gombra kattintasz?
Arra számítottál, hogy a szám 4 lesz? De miért látod helyette az 1-et?
a) Minden megjelenítéshez egy állapot tartozik. Ennek az állapotnak az értéke a renderelés élettartama alatt zárolva marad.
Figyelje meg, hogy a handleClick függvényen belüli napló a számláló értékét 0-ként írja ki.
Nem számít, hányszor hívja meg a setCounter metódust, a számláló értéke ugyanaz marad.
const handleClick = () => {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
b) Amíg az eseménykezelőben lévő összes kód le nem fut, a React nem indít el újrarenderelést.
Emiatt minden setCounter hívás nem vált ki egyedi renderelést. Ehelyett a React hozzáadja ezeket a beállító függvényeket egy sorhoz. Végrehajtja őket abban a sorrendben, ahogy sorba kerültek. Az összes utasítás végrehajtása utáni állapotfrissítések tükröződnek a következő renderelésben. Ez a több állapotfrissítés sorban állása az úgynevezett adagoló. Lehetővé teszi, hogy a React hatékonyabb legyen.
Ezért itt egyetlen megjelenítést kapunk 4 különböző render helyett.
Ez a példa egyszerű, és a hibát a kód frissítésével az alábbiak szerint javíthatja:
const handleClick = () => {
setCounter(counter + 4);
console.log(`%c Counter:${counter}`, "color:green");
};
De mi van akkor, ha olyan használati esettel rendelkezik, amikor többször is frissíteni szeretné az állapotot a következő renderelés előtt.
Ott a _ frissítő _ funkció jól jön.
Az előző példát a frissítő függvénnyel a következőképpen alakíthatjuk át:
const handleClick = () => {
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
setCounter(prevCounter => prevCounter + 1);
console.log(`%c Counter:${counter}`, "color:green");
};
Itt prevCounter ⇒ prevCounter + 1 a frissítő funkciót jelenti.
Amint azt korábban kifejtettük, ezek a frissítő utasítások is sorba kerülnek (kötegelés).
A frissítő függvény egy függőben lévő/előző állapotot kap, amelyet a következő állapot kiszámításához használ.
Az alábbiakban látható a CodeSandbox a frissítő funkcióval. Próbáljon meg a növelés gombra kattintani.
Inicializáló funkció
Vessen egy pillantást az alábbi példára. Itt a getItems függvényt hívjuk meg, hogy megkapjuk az állapot kezdeti értékét.
import React from "react";
import { useState } from "react";
function ListItems() {
const getItems = () => {
console.log(`%c getItems called`, "color:hotpink");
return Array(50).fill(0);
};
const [items, setItems] = useState(getItems());
return (
<div className="card">
<ul> {items.map((item, index) =>
( <li key={index}>Item {index + 1} </li>))}
</ul> <button onClick={() => setItems([...items, 0])}>Add Item</button> </div> );
}
export default ListItems;
Ez a függvény egy 50-es méretű tömböt hoz létre, és a tömböt nullákkal tölti fel. Lásd az alábbi képet.
Ezek az elemek ezután megjelennek a képernyőn.
Úgy tűnik, minden rendben van, de van egy probléma.
Kattints a Elem hozzáadása gombot (a tételek listája után található) új elem hozzáadásához a listához. Figyelje meg a naplókat.
Látod itt a problémát?
A „getItems call” napló minden alkalommal hozzáadásra kerül a konzolhoz, amikor hozzáad egy elemet. Ez azt jelenti, hogy ez a függvény minden renderelésnél meghívásra kerül.
Ne feledje, hogy a useState figyelmen kívül hagyja az első renderelés után átadott kezdeti értéket, de itt a kezdeti érték újraszámítása még folyamatban van. Ez drága lehet, ha nagy tömböket hozunk létre, vagy nehéz számításokat végzünk.
Ezt a problémát átutalással meg tudjuk oldani getItems mint egy _ inicializáló _ függvényt.
Most pedig hajtsunk végre egy kis változtatást a kódon.
const [items, setItems] = useState(getItems);
Tekintse meg a CodeSandbox konzolablakát. Figyelje meg, hogy a „getItems hívott” napló csak az első rendereléskor kerül nyomtatásra. Ha további elemeket ad hozzá, ez a napló nem jelenik meg.
Bár vizuálisan nincs különbség a két példa között, a teljesítmény tekintetében különböznek.
Ne felejtse el, ha a kezdeti állapothoz függvényre van szüksége, mindig adja át a függvényt, vagy hívja meg a függvényt egy másik függvényen belül. Soha ne hívja közvetlenül a függvényt.
✅ const [items, setItems] = useState(getItems);
✅ const [items, setItems] = useState(() => getItems());
❌ const [items, setItems] = useState(getItems());
Hány useState hook lehet
Egy komponensen belül annyi useState hook lehet, amennyi szükséges.
Lásd a CodeSandboxot
Többféle felhasználás Állami horgok
Az alábbi összetevő három különböző állapotú – felhasználónév, jelszó, keepMeSignedIn.
Próbálja meg frissíteni a keepMeSignedIn felhasználónév értékeit. A frissített állapotok naplózásra kerülnek a konzolon, amikor a bejelentkezés gombra kattintanak.
Főbb
- A useState egy mechanizmust biztosít az újrarenderelés elindításához, és az állapot megőrzéséhez az újrarenderelések között.
- Használja a frissítő funkciót, ha szüksége van:
- Számítsa ki a következő állapotot az előző állapot alapján.
- A következő renderelés előtt hajtson végre többszöri állapotfrissítést.
- Ha a kezdeti állapot egy függvényből származik – használja az inicializáló függvény szintaxisát.
- Egy komponensen belül több useState hook is lehet.
Tetszett ez a bejegyzés? Oszd meg másokkal.
Eredetileg a személyes blogomhoz írtam - https://gauravsen.com/use-state-hook
