Kuidas Reactis olekut tõhusalt hallata

Kui olete kirjutanud palju Reacti koodi, on tõenäoline, et kasutasite olekut valesti. Üks levinud viga, mida paljud Reacti arendajad teevad, on olekute globaalne salvestamine rakenduses, selle asemel, et neid salvestada komponentidesse, kus neid kasutatakse.

Siit saate teada, kuidas saate oma koodi ümber kujundada kohaliku oleku kasutamiseks ja miks on see alati hea mõte.

Reacti oleku põhinäide

Siin on väga lihtne loenduri rakendus mis näitab, kuidas Reactis olekut tavaliselt käsitletakse:

importida {useState} alates'reageeri'
importida {Loendur} alates'loendur'
funktsiooniRakendus(){
konst [count, setCount] = useState(0)
tagasi<Loendurloendama={count}setCount={setCount} />
}
eksportidavaikimisi Rakendus

1. ja 2. ridadel impordite useState() konks riigi loomiseks ja Loendur komponent. Sina määratled loendama riik ja setCount oleku ajakohastamise meetod. Seejärel annate mõlemad alla Loendur komponent.

The Loendur komponent renderdab seejärel loendama ja kõned setCount loenduse suurendamiseks ja vähendamiseks.

funktsiooniLoendur({count, setCount}) {
tagasi (


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

Sa ei defineerinud loendama muutuv ja setCount toimivad lokaalselt Loendur komponent. Pigem andsite selle edasi emakomponendist (Rakendus). Teisisõnu kasutate globaalset riiki.

Probleem globaalsete riikidega

Globaalse oleku kasutamise probleem seisneb selles, et salvestate oleku ülemkomponenti (või vanema ülemkomponenti) ja seejärel rekvisiitidena edasi andes komponendile, kus seda olekut tegelikult vaja on.

Mõnikord on see hea, kui teie olek on jagatud paljude komponentide vahel. Kuid sel juhul ei huvita ükski teine ​​komponent loendama riik, välja arvatud Loendur komponent. Seetõttu on parem osariik üle viia Loendur komponenti, kus seda tegelikult kasutatakse.

Riigi nihutamine lapskomponendile

Kui liigutate olekusse Loendur komponent, näeks see välja selline:

importida {useState} alates'reageeri'
funktsiooniLoendur() {
konst [count, setCount] = useState(0)
tagasi (


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

Siis sinu sees Rakendus komponent, ei pea te midagi alla andma Loendur komponent:

// import
funktsiooniRakendus(){
tagasi<Loendur />
}

Loendur töötab täpselt samamoodi nagu varem, kuid suur erinevus on see, et kõik teie osariigid on selles lokaalselt Loendur komponent. Nii et kui teil on vaja avalehel teist loendurit, on teil kaks sõltumatut loendurit. Iga loendur on iseseisev ja hoolitseb kogu oma oleku eest.

Oleku käsitlemine keerukamates rakendustes

Teine olukord, kus kasutaksite globaalset olekut, on vormid. The Rakendus allolev komponent edastab vormiandmed (e-post ja parool) ja määramismeetodi alla Sisselogimisvorm komponent.

importida { useState } alates"reageerida";
importida { Sisselogimisvorm } alates"./Sisselogimisvorm";
funktsiooniRakendus() {
konst [formData, setFormData] = useState({
 email: "",
 parool: "",
 });
funktsiooniVärskenda FormData(uued andmed) {
 setFormData((eelmine) => {
tagasi { ...eelmine, ...uued andmed };
 });
 }
funktsioonion Submit() {
konsool.log (formData);
 }
tagasi (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Sisselogimisvorm komponent võtab sisse logimisteabe ja renderdab selle. Kui esitate vormi, kutsub see üles updateData funktsioon, mis edastatakse ka vanemkomponendist.

funktsiooniSisselogimisvorm({ onSubmit, data, updateData }) {
funktsioonikäepide Esita(e) {
 e.preventDefault();
 onSubmit();
 }
tagasi (


"e-post">E-post</label>
 tüüp="e-post"
 id="e-post"
 value={data.email}
 onChange={(e) => updateData({ meili: e.target.value })}
 />
"parool">Parool</label>
 tüüp="parool"
 id="parool"
 value={data.password}
 onChange={(e) => updateData({ parool: e.target.value })}
 />
"Esita">Esita</button>
 </form>
 );
}

Emakomponendi oleku haldamise asemel on parem olek teisaldada LoginForm.js, kus saate koodi kasutada. See muudab iga komponendi iseseisvaks ja ei sõltu andmete osas teisest komponendist (st vanemast). Siin on selle muudetud versioon Sisselogimisvorm:

importida { useRef } alates"reageerida";
funktsiooniSisselogimisvorm({ esitamisel }) {
konst emailRef = useRef();
konst passwordRef = useRef();

funktsioonikäepide Esita(e) {
 e.preventDefault();
 onSubmit({
 email: emailRef.current.value,
 parool: passwordRef.current.value,
 });
 }
tagasi (


"e-post">E-post</label>
"e-post" id="e-post" ref={emailRef} />
"parool">Parool</label>
"parool" id="parool" ref={passwordRef} />
"Esita">Esita</button>
 </form>
 );
}

Siin seote sisendi muutujaga kasutades viide atribuudid ja useRef Reageerige konks, selle asemel, et värskendusmeetodeid otse edastada. See aitab eemaldada paljusõnalist koodi ja optimeerige vormi jõudlust, kasutades konksu useRef.

Emakomponendis (App.js), saate eemaldada nii globaalse oleku kui ka updateFormData() meetod, sest te ei vaja seda enam. Ainus funktsioon on onSubmit(), mille kutsute välja seestpoolt Sisselogimisvorm konsooli sisselogimisandmete logimiseks.

funktsiooniRakendus() {
funktsioonion Submit(formData) {
konsool.log (formData);
 }
tagasi (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Te mitte ainult ei muutnud oma osariiki võimalikult kohalikuks, vaid eemaldasite üldse vajaduse osariigi järele (ja kasutasite viited selle asemel). Nii et sinu Rakendus komponent on muutunud oluliselt lihtsamaks (millel on ainult üks funktsioon).

Sinu Sisselogimisvorm ka komponent muutus lihtsamaks, sest te ei pidanud oleku värskendamise pärast muretsema. Pigem jälgite lihtsalt kahte viited, ja see ongi kõik.

Jagatud oleku käsitlemine

Lähenemisviisiga, mille eesmärk on muuta riik võimalikult kohalikuks, on üks probleem. Tihti tuleb ette stsenaariume, kus ülemkomponent ei kasuta olekut, kuid edastab selle mitmele komponendile.

Näiteks on a TodoContainer emakomponent kahe alamkomponendiga: Nimekiri ja TodoCount.

funktsiooniTodoContainer() {
konst [todos, setTodos] = useState([])
tagasi (
 <>


 </>
 )
}

Mõlemad alamkomponendid nõuavad todos olek, nii TodoContainer annab selle edasi mõlemale. Selliste stsenaariumide puhul peate muutma osariigi võimalikult kohalikuks. Ülaltoodud näites asetades selle sisse TodosContainer on nii kohalik kui võimalik.

Kui sa paneksid selle oleku enda sisse Rakendus komponenti, ei oleks see nii kohalik kui võimalik, sest see ei ole kahele andmeid vajavale komponendile lähim vanem.

Suurte rakenduste puhul oleku haldamine lihtsalt rakendusega useState() konks võib osutuda keeruliseks. Sellistel juhtudel peate võib-olla valima React Context API või Reage Redux riiki tõhusalt juhtida.

Lisateave React Hookide kohta

Konksud moodustavad Reacti aluse. Kasutades Reactis konkse, saate vältida pika koodi kirjutamist, mis muidu kasutaks klasse. Konks useState() on vaieldamatult kõige sagedamini kasutatav Reacti konks, kuid on ka palju teisi, nagu useEffect(), useRef() ja useContext().

Kui soovite Reactiga rakendusi arendada, peate teadma, kuidas neid konkse oma rakenduses kasutada.