Kaip efektyviai valdyti būseną „React“.

Jei parašėte daug React kodo, gali būti, kad būseną naudojote neteisingai. Viena dažna klaida, kurią daro daugelis „React“ kūrėjų, yra būsenų saugojimas visame pasaulyje, o ne komponentuose, kuriuose jos naudojamos.

Sužinokite, kaip pakeisti savo kodą, kad būtų panaudota vietinė būsena, ir kodėl tai daryti visada yra gera idėja.

Pagrindinis „React“ būsenos pavyzdys

Štai labai paprasta skaitiklio programa Tai rodo, kaip būsena paprastai tvarkoma „React“:

importuoti {useState} iš'reaguoti'
importuoti {skaitiklis} iš'skaitiklis'
funkcijaProgramėlė(){
konst [count, setCount] = useState(0)
grąžinti<Skaitiklisskaičiuoti={count}setCount={setCount} />
}
eksportuotinumatytas Programėlė

1 ir 2 eilutėse importuojate useState() kabliukas kuriant valstybę, ir Skaitiklis komponentas. Jūs apibrėžiate skaičiuoti valstybės ir setCount Būsenos atnaujinimo būdas. Tada perduodate abu į Skaitiklis komponentas.

The Skaitiklis tada komponentas atvaizduoja skaičiuoti ir skambina setCount padidinti ir sumažinti skaičių.

funkcijaSkaitiklis({count, setCount}) {
grąžinti (


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

Jūs neapibrėžėte skaičiuoti kintamasis ir setCount veikia lokaliai viduje Skaitiklis komponentas. Atvirkščiai, jūs perdavėte jį iš pirminio komponento (Programėlė). Kitaip tariant, jūs naudojate pasaulinę būseną.

Problema su globaliomis valstybėmis

Problema naudojant visuotinę būseną yra ta, kad išsaugote būseną pirminiame komponente (arba pirminiame komponente) ir tada perduodamas kaip rekvizitas į komponentą, kur ši būsena iš tikrųjų reikalinga.

Kartais tai gerai, kai turite būseną, kuri yra bendrinama daugeliui komponentų. Tačiau šiuo atveju jokiam kitam komponentui nerūpi skaičiuoti valstybė, išskyrus Skaitiklis komponentas. Todėl geriau perkelti valstybę į Skaitiklis komponentas ten, kur jis iš tikrųjų naudojamas.

Valstybės perkėlimas į vaiko komponentą

Kai perkeliate būseną į Skaitiklis komponentas, jis atrodytų taip:

importuoti {useState} iš'reaguoti'
funkcijaSkaitiklis() {
konst [count, setCount] = useState(0)
grąžinti (


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

Tada tavo viduje Programėlė komponentas, jums nereikia nieko perduoti į Skaitiklis komponentas:

// importas
funkcijaProgramėlė(){
grąžinti<Skaitiklis />
}

Skaitiklis veiks lygiai taip pat, kaip ir anksčiau, tačiau didelis skirtumas yra tas, kad visos jūsų valstijos yra lokaliai šioje Skaitiklis komponentas. Taigi, jei pagrindiniame puslapyje reikia turėti kitą skaitiklį, turėtumėte du nepriklausomus skaitiklius. Kiekvienas skaitiklis yra savarankiškas ir rūpinasi visa savo būsena.

Būsenos tvarkymas sudėtingesnėse programose

Kita situacija, kai naudotumėte globalią būseną, yra su formomis. The Programėlė toliau esantis komponentas perduoda formos duomenis (el. paštą ir slaptažodį) ir nustatymo metodą Prisijungimo forma komponentas.

importuoti { useState } iš"reaguoti";
importuoti { Prisijungimo forma } iš"./Prisijungimo forma";
funkcijaProgramėlė() {
konst [formData, setFormData] = useState({
 paštas: "",
 Slaptažodis: "",
 });
funkcijaatnaujinti FormData(nauji duomenys) {
 setFormData((ankstesnė) => {
grąžinti { ...ankstesnis, ...naujiDuomenys };
 });
 }
funkcijaonSubmit() {
konsolė.log (formData);
 }
grąžinti (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Prisijungimo forma komponentas priima prisijungimo informaciją ir ją pateikia. Kai pateikiate formą, ji iškviečia atnaujinti duomenis funkcija, kuri taip pat perduodama iš pirminio komponento.

funkcijaPrisijungimo forma({ onSubmit, data, updateData }) {
funkcijarankenaPateikti(e) {
 e.preventDefault();
 onSubmit();
 }
grąžinti (


"el. paštas">El. paštas</label>
 tipas ="el. paštas"
 id="el. paštas"
 value={duomenys.email}
 onChange={(e) => updateData({ paštu: e.target.value })}
 />
"Slaptažodis">Slaptažodis</label>
 tipas ="Slaptažodis"
 id="Slaptažodis"
 value={duomenys.password}
 onChange={(e) => updateData({ Slaptažodis: e.target.value })}
 />
"Pateikti">Pateikti</button>
 </form>
 );
}

Užuot valdę pagrindinio komponento būseną, geriau perkelti būseną į LoginForm.js, kur naudosite kodą. Taip kiekvienas komponentas tampa savarankiškas ir nepriklauso nuo kito komponento (t. y. pagrindinio) duomenų. Štai modifikuota versija Prisijungimo forma:

importuoti { useRef } iš"reaguoti";
funkcijaPrisijungimo forma({ OnSubmit }) {
konst emailRef = useRef();
konst passwordRef = useRef();

funkcijarankenaPateikti(e) {
 e.preventDefault();
 onSubmit({
 paštas: emailRef.current.value,
 slaptažodis: passwordRef.current.value,
 });
 }
grąžinti (


"el. paštas">El. paštas</label>
"el. paštas" id="el. paštas" ref={emailRef} />
"Slaptažodis">Slaptažodis</label>
"Slaptažodis" id="Slaptažodis" ref={passwordRef} />
"Pateikti">Pateikti</button>
 </form>
 );
}

Čia galite susieti įvestį su kintamuoju naudodami ref atributai ir useRef Reaguokite, o ne tiesiogiai perduokite atnaujinimo metodus. Tai padeda pašalinti išsamų kodą ir optimizuokite formos našumą naudodami "useRef" kabliuką.

Pirminiame komponente (App.js), galite pašalinti tiek pasaulinę būseną, tiek updateFormData() metodas, nes jums jo nebereikia. Liko vienintelė funkcija onSubmit (), kurį iškviečiate iš vidaus Prisijungimo forma komponentas, kad konsolėje užregistruotų prisijungimo duomenis.

funkcijaProgramėlė() {
funkcijaonSubmit(formData) {
konsolė.log (formData);
 }
grąžinti (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Jūs ne tik padarėte savo valstiją kuo vietesnę, bet iš tikrųjų pašalinote bet kokios valstybės poreikį (ir panaudojote refs vietoj to). Taigi tavo Programėlė komponentas tapo žymiai paprastesnis (turi tik vieną funkciją).

Tavo Prisijungimo forma komponentas taip pat tapo paprastesnis, nes jums nereikėjo jaudintis dėl būsenos atnaujinimo. Verčiau sekite du refs, Štai ir viskas.

Bendros būsenos tvarkymas

Yra viena problema, susijusi su požiūriu, kuriuo siekiama, kad valstybė būtų kuo vietesnė. Dažnai susidursite su scenarijais, kai pirminis komponentas nenaudoja būsenos, bet perduoda ją keliems komponentams.

Pavyzdys yra turėti a „TodoContainer“. pirminis komponentas su dviem antriniais komponentais: Užduočių sąrašas ir TodoCount.

funkcija„TodoContainer“.() {
konst [todos, setTodos] = useState([])
grąžinti (
 <>


 </>
 )
}

Abu šie antriniai komponentai reikalauja todos valstybė, taigi „TodoContainer“. perduoda jį abiem. Esant tokiems scenarijams, kaip šie, turite padaryti valstybę kiek įmanoma vietinę. Aukščiau pateiktame pavyzdyje įdėjus jį į vidų TodosContainer yra toks vietinis, kiek tik galite gauti.

Jei įdėtumėte šią būseną į savo Programėlė komponentas, jis nebūtų kiek įmanoma vietinis, nes jis nėra arčiausiai dviejų komponentų, kuriems reikia duomenų, pirminis.

Didelėms programoms valdyti būseną tik su useState() kabliukas gali pasirodyti sunkus. Tokiais atvejais gali tekti pasirinkti React Context API arba Reaguoti Redux efektyviai valdyti valstybę.

Sužinokite daugiau apie „React Hooks“.

Kabliukai sudaro „React“ pagrindą. Naudodami „React“ kabliukus, galite nerašyti ilgo kodo, kuris kitu atveju naudotų klases. „useState() hook yra neabejotinai dažniausiai naudojamas „React Hook“, tačiau yra daug kitų, tokių kaip useEffect(), useRef() ir useContext().

Jei norite įgyti įgūdžių kurdami programas naudodami „React“, turite žinoti, kaip naudoti šiuos kabliukus savo programoje.