Kako učinkovito upravljati stanjem u Reactu

Ako ste napisali puno React koda, velike su šanse da ste pogrešno koristili stanje. Jedna uobičajena pogreška koju mnogi programeri Reacta rade jest globalno pohranjivanje stanja u aplikaciji, umjesto da ih pohranjuju u komponente u kojima se koriste.

Naučite kako možete refaktorirati svoj kod da koristi lokalno stanje i zašto je to uvijek dobra ideja.

Osnovni primjer stanja u Reactu

Evo vrlo jednostavna primjena brojača koji pokazuje kako se stanjem obično rukuje u Reactu:

uvoz {useState} iz'reagirati'
uvoz {Brojač} iz'brojač'
funkcijaaplikacija(){
konst [count, setCount] = useState(0)
povratak<Brojačračunati={računati}setCount={setCount} />
}
izvozzadano aplikacija

U retke 1 i 2 uvozite useState() kuka za stvaranje države, i Brojač komponenta. Vi definirate računati stanje i setCount metoda za ažuriranje stanja. Zatim oba proslijedite u Brojač komponenta.

The Brojač komponenta zatim prikazuje računati i poziva setCount za povećanje i smanjenje broja.

funkcijaBrojač({count, setCount}) {
povratak (


 setCount(prev => prethodni - 1)}>-</button>
{count}</span>
 setCount(prev => prethodni + 1)}>+</button>
 </div>
 )
}

Niste definirali računati varijabla i setCount funkcionirati lokalno unutar Brojač komponenta. Umjesto toga, proslijedili ste ga iz nadređene komponente (aplikacija). Drugim riječima, koristite globalno stanje.

Problem s globalnim državama

Problem s korištenjem globalnog stanja je taj što pohranjujete stanje u nadređenu komponentu (ili nadređenu nadređenu komponentu), a zatim prenoseći ga kao rekvizite na komponentu gdje je to stanje zapravo potrebno.

Ponekad je to u redu kada imate stanje koje dijeli mnogo komponenti. Ali u ovom slučaju nijedna druga komponenta ne mari za računati stanje osim za Brojač komponenta. Stoga je bolje državu preseliti u Brojač komponentu gdje se zapravo koristi.

Premještanje države u komponentu djeteta

Kada premjestite državu na Brojač komponente, to bi izgledalo ovako:

uvoz {useState} iz'reagirati'
funkcijaBrojač() {
konst [count, setCount] = useState(0)
povratak (


 setCount(prev => prethodni - 1)}>-</button>
{count}</span>
 setCount(prev => prethodni + 1)}>+</button>
 </div>
 )
}

Zatim unutar vašeg aplikacija komponentu, ne morate ništa proslijediti na Brojač komponenta:

// uvozi
funkcijaaplikacija(){
povratak<Brojač />
}

Brojač će raditi potpuno isto kao i prije, ali velika je razlika u tome što su sva vaša stanja lokalno unutar ovog Brojač komponenta. Dakle, ako trebate imati još jedan brojač na početnoj stranici, tada biste imali dva neovisna brojača. Svaki brojač je samostalan i brine o svom vlastitom stanju.

Rukovanje stanjem u složenijim aplikacijama

Druga situacija u kojoj biste koristili globalno stanje je s obrascima. The aplikacija komponenta ispod prosljeđuje podatke obrasca (e-pošta i lozinka) i metodu postavljača dolje do Obrazac za prijavu komponenta.

uvoz {useState} iz"reagirati";
uvoz {Obrazac za prijavu} iz"./Obrazac za prijavu";
funkcijaaplikacija() {
konst [formData, setFormData] = useState({
 email: "",
 lozinka: "",
 });
funkcijaupdateFormData(noviPodaci) {
 setFormData((prev) => {
povratak { ...prev, ...novi podaci };
 });
 }
funkcijaonSubmit() {
konzola.log (formData);
 }
povratak (
 podaci={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Obrazac za prijavu komponenta preuzima podatke za prijavu i prikazuje ih. Kada pošaljete obrazac, on poziva updateData funkcija koja se također prenosi s nadređene komponente.

funkcijaObrazac za prijavu({ onSubmit, data, updateData }) {
funkcijarukovanjePošalji(e) {
 e.preventDefault();
 onSubmit();
 }
povratak (


"e-pošta">E-mail</label>
 vrsta="e-pošta"
 id="e-pošta"
 vrijednost={podaci.e-pošta}
 onChange={(e) => updateData({ elektronička pošta: e.target.value })}
 />
"lozinka">Lozinka</label>
 vrsta="lozinka"
 id="lozinka"
 vrijednost={podaci.lozinka}
 onChange={(e) => updateData({ lozinka: e.target.value })}
 />
"podnijeti">Pošalji</button>
 </form>
 );
}

Umjesto upravljanja stanjem nadređene komponente, bolje je premjestiti stanje u LoginForm.js, gdje ćete upotrijebiti kôd. Na taj način svaka komponenta postaje samostalna i ne ovisi o drugoj komponenti (tj. nadređenoj) za podatke. Evo modificirane verzije Obrazac za prijavu:

uvoz {useRef} iz"reagirati";
funkcijaObrazac za prijavu({ onSubmit }) {
konst emailRef = useRef();
konst passwordRef = useRef();

funkcijarukovanjePošalji(e) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 lozinka: passwordRef.current.value,
 });
 }
povratak (


"e-pošta">E-mail</label>
"e-pošta" id="e-pošta" ref={emailRef} />
"lozinka">Lozinka</label>
"lozinka" id="lozinka" ref={passwordRef} />
"podnijeti">Pošalji</button>
 </form>
 );
}

Ovdje povezujete unos s varijablom pomoću ref atributi i upotrebaRef React hook, umjesto izravnog prosljeđivanja metoda ažuriranja. To vam pomaže ukloniti opširni kod i optimizirajte izvedbu obrasca pomoću kuke useRef.

U nadređenoj komponenti (App.js), možete ukloniti i globalno stanje i updateFormData() način jer vam više ne treba. Jedina preostala funkcija je onSubmit(), koje prizivate iznutra Obrazac za prijavu komponenta za bilježenje podataka za prijavu na konzoli.

funkcijaaplikacija() {
funkcijaonSubmit(obrazacData) {
konzola.log (formData);
 }
povratak (
 podaci={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Ne samo da ste svoju državu učinili što je više moguće lokalnom, već ste zapravo uklonili potrebu za bilo kakvom državom uopće (i upotrijebili ref umjesto toga). Dakle, tvoj aplikacija komponenta je znatno pojednostavljena (ima samo jednu funkciju).

Vaš Obrazac za prijavu komponenta je također postala jednostavnija jer se ne morate brinuti o ažuriranju stanja. Umjesto toga, samo pratite dva ref, i to je to.

Rukovanje dijeljenim stanjem

Postoji jedan problem s pristupom pokušaja da se država učini što je moguće lokalnom. Često biste naišli na scenarije u kojima nadređena komponenta ne koristi stanje, ali ga prosljeđuje višestrukim komponentama.

Primjer je imati a TodoContainer nadređena komponenta s dvije podređene komponente: TodoList i TodoCount.

funkcijaTodoContainer() {
konst [todos, setTodos] = useState([])
povratak (
 <>


 </>
 )
}

Obje ove dječje komponente zahtijevaju todos stanje, dakle TodoContainer prenosi ga obojici. U ovakvim scenarijima državu morate učiniti što je moguće lokalnom. U gornjem primjeru, stavljanje unutar TodosContainer je onoliko lokalno koliko možete dobiti.

Kad biste ovo stanje stavili u svoje aplikacija komponenta, ne bi bila što je moguće lokalnija jer nije najbliži roditelj dvjema komponentama koje trebaju podatke.

Za velike aplikacije, upravljanje stanjem samo s useState() udica se može pokazati teškim. U takvim slučajevima, možda ćete se morati odlučiti za React Context API ili React Redux učinkovito upravljati državom.

Saznajte više o React kukicama

Udice čine temelj Reacta. Korištenjem kuka u Reactu možete izbjeći pisanje dugačkog koda koji bi inače koristio klase. UseState() hook je nedvojbeno najčešće korišten React hook, ali postoje mnogi drugi kao što su useEffect(), useRef() i useContext().

Ako želite postati vješti u razvoju aplikacija s Reactom, tada morate znati kako koristiti ove kuke u svojoj aplikaciji.