Ako efektívne riadiť štát v Reacte

Ak ste napísali veľa kódu React, je pravdepodobné, že ste stav použili nesprávne. Jednou z bežných chýb, ktoré robí veľa vývojárov Reactu, je globálne ukladanie stavov v aplikácii namiesto ich ukladania do komponentov, kde sa používajú.

Zistite, ako môžete zmeniť svoj kód na využitie miestneho stavu a prečo je to vždy dobrý nápad.

Základný príklad stavu v React

Tu je veľmi jednoduchá aplikácia počítadla ktorý ilustruje, ako sa so stavom zvyčajne zaobchádza v React:

importovať {useState} od'reagovať'
importovať {Counter} od'counter'
funkciuApp(){
konšt [count, setCount] = useState(0)
vrátiť<Počítadlopočítať={count}setCount={setCount} />
}
exportpredvolená App

Na riadkoch 1 a 2 importujete useState() hák pre vytvorenie štátu, a Počítadlo komponent. Vy definujete počítať štát a setCount spôsob aktualizácie stavu. Potom odovzdáte obe dolu Počítadlo komponent.

The Počítadlo komponent potom vykreslí počítať a hovory setCount na zvýšenie a zníženie počtu.

funkciuPočítadlo({count, setCount}) {
vrátiť (


 setCount(predch => predchádzajúci - 1)}>-</button>
{count}</span>
 setCount(predch => predchádzajúci + 1)}>+</button>
 </div>
 )
}

Nedefinoval si počítať variabilné a setCount fungovať lokálne vo vnútri Počítadlo komponent. Namiesto toho ste ho odovzdali z nadradeného komponentu (App). Inými slovami, používate globálny stav.

Problém s globálnymi štátmi

Problém s použitím globálneho stavu je, že stav ukladáte do nadradeného komponentu (alebo rodiča rodiča) a potom odovzdať ho ako rekvizitu do komponentu, kde je tento stav skutočne potrebný.

Niekedy je to v poriadku, keď máte stav, ktorý je zdieľaný medzi mnohými komponentmi. Ale v tomto prípade sa o to nestará žiadna iná zložka počítať štát okrem Počítadlo komponent. Preto je lepšie presunúť štát do Počítadlo komponent, kde sa skutočne používa.

Presun štátu na detskú zložku

Keď presuniete štát do Počítadlo komponent, bude to vyzerať takto:

importovať {useState} od'reagovať'
funkciuPočítadlo() {
konšt [count, setCount] = useState(0)
vrátiť (


 setCount(predch => predchádzajúci - 1)}>-</button>
{count}</span>
 setCount(predch => predchádzajúci + 1)}>+</button>
 </div>
 )
}

Potom vo svojom vnútri App komponentu, nemusíte nič odovzdávať Počítadlo komponent:

// importy
funkciuApp(){
vrátiť<Počítadlo />
}

Počítadlo bude fungovať úplne rovnako ako predtým, ale veľký rozdiel je v tom, že všetky vaše štáty sú v ňom lokálne Počítadlo komponent. Ak teda potrebujete mať na domovskej stránke ďalšie počítadlo, mali by ste dve nezávislé počítadlá. Každý pult je samostatný a stará sa o celý svoj vlastný stav.

Spracovanie stavu v zložitejších aplikáciách

Ďalšou situáciou, kedy by ste použili globálny stav, sú formuláre. The App komponent nižšie odovzdá údaje formulára (e-mail a heslo) a metódu nastavenia nadol Prihlasovací formulár komponent.

importovať { useState } od"reagovať";
importovať { Prihlasovací formulár } od"./Prihlasovací formulár";
funkciuApp() {
konšt [formData, setFormData] = useState({
 email: "",
 heslo: "",
 });
funkciuupdateFormData(nové údaje) {
 setFormData((predch) => {
vrátiť { ...predchádzajúca, ...novéÚdaje };
 });
 }
funkciuonOdoslať() {
konzoly.log (formData);
 }
vrátiť (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Prihlasovací formulár komponent prevezme prihlasovacie informácie a vykreslí ich. Keď odošlete formulár, zavolá sa updateData funkcia, ktorá sa tiež prenáša z nadradeného komponentu.

funkciuPrihlasovací formulár({ onSubmit, data, updateData }) {
funkciurukoväťOdoslať(e) {
 e.preventDefault();
 onSubmit();
 }
vrátiť (


"e-mail">E-mail</label>
 typ="e-mail"
 id="e-mail"
 value={data.email}
 onChange={(e) => updateData({ e-mailom: e.target.value})}
 />
"heslo">Heslo</label>
 typ="heslo"
 id="heslo"
 value={data.password}
 onChange={(e) => updateData({ heslo: e.target.value})}
 />
"Predložiť">Odoslať</button>
 </form>
 );
}

Namiesto spravovania stavu na nadradenom komponente je lepšie presunúť stav do LoginForm.js, kde použijete kód. Ak tak urobíte, každý komponent bude samostatný a nebude závislý od iného komponentu (t. j. nadradeného) pre údaje. Tu je upravená verzia Prihlasovací formulár:

importovať { useRef } od"reagovať";
funkciuPrihlasovací formulár({ onSubmit }) {
konšt emailRef = useRef();
konšt passwordRef = useRef();

funkciurukoväťOdoslať(e) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 heslo: passwordRef.current.value,
 });
 }
vrátiť (


"e-mail">E-mail</label>
"e-mail" id="e-mail" ref={emailRef} />
"heslo">Heslo</label>
"heslo" id="heslo" ref={passwordRef} />
"Predložiť">Odoslať</button>
 </form>
 );
}

Tu naviažete vstup na premennú pomocou ref atribúty a useRef Reagovať hák namiesto priameho odovzdávania metód aktualizácie. To vám pomôže odstrániť podrobný kód a optimalizovať výkon formulára pomocou háku useRef.

V nadradenom komponente (App.js), môžete odstrániť globálny stav aj updateFormData() metódu, pretože ju už nepotrebujete. Zostáva iba funkcia onSubmit(), ktorý vyvoláte zvnútra Prihlasovací formulár komponent na prihlásenie prihlasovacích údajov do konzoly.

funkciuApp() {
funkciuonOdoslať(formData) {
konzoly.log (formData);
 }
vrátiť (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Nielenže ste urobili svoj štát čo najmiestnym, ale v skutočnosti ste odstránili potrebu akéhokoľvek štátu (a použili ho ref namiesto toho). Takže tvoja App komponent sa výrazne zjednodušil (má len jednu funkciu).

Váš Prihlasovací formulár komponent sa tiež zjednodušil, pretože ste sa nemuseli starať o aktualizáciu stavu. Skôr stačí sledovať dvoch ref, a to je všetko.

Manipulácia so zdieľaným stavom

Je tu jeden problém s prístupom snažiť sa, aby bol štát čo najmiestny. Často sa stretnete so scenármi, v ktorých nadradený komponent stav nepoužíva, ale odovzdáva ho viacerým komponentom.

Príkladom je mať a TodoContainer nadradený komponent s dvoma podradenými komponentmi: Zoznam úloh a TodoCount.

funkciuTodoContainer() {
konšt [todos, setTodos] = useState([])
vrátiť (
 <>


 </>
 )
}

Obe tieto podradené komponenty vyžadujú todos štát, tak TodoContainer odovzdáva to obom. V scenároch, ako sú tieto, musíte urobiť štát čo najmiestnym. Vo vyššie uvedenom príklade ho vložte do TodosContainer je tak miestny, ako môžete získať.

Ak by ste tento stav dali do svojho App komponent, nebude tak lokálny, ako je to len možné, pretože to nie je najbližší rodič k dvom komponentom, ktoré potrebujú údaje.

Pre veľké aplikácie, riadenie stavu len s useState() hák sa môže ukázať ako ťažký. V takýchto prípadoch sa možno budete musieť rozhodnúť pre React Context API alebo Reagovať Redux efektívne riadiť štát.

Zistite viac o React Hooks

Háčiky tvoria základ Reactu. Použitím hákov v Reacte sa môžete vyhnúť písaniu zdĺhavého kódu, ktorý by inak používal triedy. Hák useState() je nepochybne najbežnejšie používaným hákom React, ale existuje mnoho ďalších, ako napríklad useEffect(), useRef() a useContext().

Ak sa chcete stať zdatnými vo vývoji aplikácií s Reactom, musíte vedieť, ako tieto háčiky používať vo svojej aplikácii.