A reakt komponenseknek belső „állapota” lehet, a komponenshez tartozó kulcs-érték pár készlet. Amikor az állapot megváltozik, a React újra megjeleníti az összetevőt. Történelmileg az állapot csak osztálykomponensekben használható. A kampók segítségével állapotot alkalmazhat funkcionális összetevőkre is.
A hagyományos megközelítés
A React osztály komponenseinek a state az állapotukat megtartó vagyon. Ők biztosítják a setState() metódus, amellyel frissítheti az állapotot, kiváltva az újrarendelést.
class MyComponent extends React.Component { state = {value: 1}; this.updateState = () => this.setState({value: (this.state.value + 1)}); render() { return ( <div> <p>{this.state.value}</p> <button onClick={this.updateState}Increment Value</button> </div> ); } }
Ebben a példában a renderelt szöveg mindig a komponens állapotában lévő számot jeleníti meg. A gombra kattintva nő az érték.
Konvertálás funkcionális komponenssé
Ilyen egyszerű komponenssel ideális lenne ezt átírni funkcionális komponensként. Ehhez használnia kell a useState () horog. Horgokat adtunk a React 16.8-hoz; e kiadás előtt nem volt mechanizmus az állapot hozzáadásához a funkcionális komponensekhez.
Így néz ki a fenti összetevő funkcionális komponensként:
import React, {useState} from "react"; const MyComponent = () => { const [value, setValue] = useState(1); return ( <div> <p>{value}</p> <button onClick={() => setValue((value + 1))}>Increment Value</button> </div> ); };
Ez rövidebb és olvashatóbb, mint az osztályalapú eredeti. Az osztálykomponenssel ellentétben nem férhet hozzá a state példány tulajdonság vagy setState() módszer. Helyette, useState() meghívást kap az állapot beállítására és egy frissítő funkció beszerzésére.
A felhasználás anatómiájaState () Hook
A horgok a React szolgáltatás, amely lehetővé teszi a funkcionalitás funkcionális összetevőkbe való összekapcsolását. Mivel a függvények tiszták és nincsenek példányaik, az eredetileg mint React.Component osztály metódusai nem használhatók közvetlenül. A horgok segítségével ezeket a szolgáltatásokat hozzáadhatja az összetevőkhöz anélkül, hogy átalakításra lenne szükség osztályokba.
Az useState() horog állít fel egyéni állami ingatlant. Egy tömböt ad vissza, amely két elemet tartalmaz: az aktuális állapotértéket, és egy olyan funkciót, amelyet új értékkel hívhat meg az állapot frissítéséhez.
A példában a tömb romboló hozzárendelés hogy a tömbértékeket világosan megnevezett változókba bontsa ki. Megállapodás szerint a szetter metódust előtaggal kell ellátni set mivel ez foglalja el a setState() osztályos módszer.
Hívás useState() deklarál egy állapotváltozót, value esetünkben, amely a funkcióhívások között „megmarad”. Azt jelenti useState() garantáltan ugyanazt az értéket adja vissza minden alkalommal, amikor az összetevőjén belül meghívja. Bármely más változó értéke elvész, ha egy funkció kilép; A React belső állapotban tartja fenn az állapotértékeket, hogy a funkció minden egyes futtatásakor ugyanazt kapja vissza.
Az állam frissítése
Az állapotfrissítési funkció csak egy rendszeres függvény. A onClick kezelő az aktuális állapotérték helyettesítésére. A React az állapotértékek belső kezelésével biztosítja, hogy az alkatrész újra megjelenjen. useState() megadja az új értéket, ami az állapotváltást végrehajtja.
Fontos különbség van a setState() osztály alkotóelemei: funkcionális állapotfrissítők cserélje ki az állam, míg setState() sekély összeolvadást végez:
const [value, setValue] = useState({foo: "bar", test: {example: "demo"}}); setValue({foo: "foobar"}); // Results in {foo: "foobar"} this.state = {foo: "bar", test: {example: "demo"}}; this.setState({foo: "foobar"}); // Results in {foo: "foobar", test: {example: "demo"}};
Az új állapotérték közvetlen átadása helyett egy funkciót is átadhat az állapotfrissítőknek. A függvények az aktuális állapotot kapják meg paraméterként, és vissza kell adniuk az új állapotértéket. Ez akkor hasznos, ha kapcsolható értékekkel dolgozik.
const Checkbox = () => { const [checked, setChecked] = useState(false); const toggle = previous => !previous; return <input checked={checked} onClick={() => setChecked(toggle)} />; };
Ez segít a logika többszörös használatában a komponensen belül több helyen.
Alapértelmezett értékek
Még egy pontot meg kell jegyezni useState(). Maga a horog elfogad egy olyan paramétert, amely beállítja az állapotváltozó kezdeti értékét. A fenti példában a value inicializálva lesz 1. Ha nem ad meg értéket, undefined használt. Ez egyezik a state példány tulajdonság egy osztálykomponensben.
Ha átad egy függvényt a useState(), A React felhívja, és visszatérési értékét használja kiinduló állapotértékként.
const MyComponent = () => { const initialState = () => 1; const [value, setValue] = useState(initialState); };
Ez a technika lehetővé teszi a „lusta” állapot inicializálását. A függvény addig nem lesz meghívva, amíg a React valóban készen áll az állapot beállítására.
A függvény használata azt is biztosítja, hogy a kezdeti állapotérték csak egyszer kerül kiszámításra. Ez akkor fontos, ha a kezdeti állapot meghatározása drága számítást igényel – ha közvetlenül adja át, akkor az érték minden alkalommal kiszámításra kerül, amikor az összetevő renderel, összehasonlítva az első renderelés egyszeri értékével, ha átad egy hivatkozást egy függvényre.
const MyComponent = () => { const doSomethingExpensive = () => { // ... } const [value, setValue] = useState(doSomethingExpensive()); const [value, setValue] = useState(doSomethingExpensive); };
A kettő finom, de jelentős különbsége useState() felhívások szemléltetik a teljesítmény javulását. Az első sor minden render hívásnál elvégezné a drága műveletet, még akkor is, ha felesleges volt, mert az állapot már inicializálva volt. Ez a második esetben nem fordulna elő.
Több állapotérték használata
Néhány lehetőség közül választhat, ha több állapotértéket használ egyetlen funkciókban. Visszatérhet egy osztályszerű rendszerre, egyetlen objektumot tárolva állapotban:
const MyComponent = () => { const [user, setUser] = useState({id: 1, username: "foobar"}); };
Meg kell győződnie arról, hogy felhívta setUser() a frissített felhasználóval tárgy. A terjedési szintaxis ugyanolyan jól jön, mint az osztály összetevői:
setUser({...user, username: "example"});
Ez új objektumot hoz létre a user. Ezután frissíti a username tulajdonság új értékére. Fontos, hogy létrehozzon egy új objektum, ahelyett, hogy közvetlenül mutálná a meglévő objektumot, így a React állapotegyeztetése azonosíthatja a változást.
Alternatív megoldásként hívhat useState() többször egyedi állapotváltozók beállításához minden elemhez. Ez gyakran a funkcionális komponensek preferált megközelítése. Ez megkönnyítheti az egyes állapotértékek frissítését.
const MyComponent = () => { const [userId, setUserId] = useState(1); const [username, setUsername] = useState("foobar"); };
Az állapotképes tulajdonságoknak mostantól saját állapotváltozóik és frissítési funkcióik vannak.
Következtetés
Reagál useState() horog teszi a funkcionális alkatrészeket erősebbé, lehetővé téve számukra az állapot birtoklását. Beállíthat egy kezdeti értéket, hozzáférhet az aktuális értékhez azzal a biztosítékkal, hogy az az újrarendelések között is megmarad, és frissítheti az állapotot egy speciálisan biztosított funkció segítségével.
Az állapotfüggő funkcionális komponensek gyakran gyorsabban írhatók, mint osztályalapú társaik. Sőt, nyilvánvalóbbá tehetik, mi történik a kódbázisban, mint a hivatkozások state és setState() kiküszöbölik az egyértelmű változónevek javára. Végül, useState() rugalmasságot biztosít, és azt jelenti, hogy már nem kell funkcionális összetevőket osztálykomponensekké konvertálni abban a pillanatban, amikor a szükséges állapotot megkapja.
