Kuinka hallita tilaa tehokkaasti Reactissa

Jos olet kirjoittanut paljon React-koodia, olet todennäköisesti käyttänyt tilaa väärin. Yksi yleinen virhe, jonka monet React-kehittäjät tekevät, on tilojen tallentaminen maailmanlaajuisesti sovellukseen sen sijaan, että ne tallentaisivat ne komponentteihin, joissa niitä käytetään.

Opi, kuinka voit muuttaa koodisi käyttämään paikallista tilaa ja miksi se on aina hyvä idea.

Perusesimerkki tilasta Reactissa

Tässä on erittäin yksinkertainen laskurisovellus joka on esimerkki siitä, kuinka tilaa tyypillisesti käsitellään Reactissa:

tuonti {useState} alkaen'reagoi'
tuonti {Laskuri} alkaen'laskuri'
toimintoSovellus(){
konst [count, setCount] = useState(0)
palata<LaskuriKreivi={Kreivi}setCount={setCount} />
}
viedäoletuksena Sovellus

Riveillä 1 ja 2 tuot useState() koukku valtion luomiseen, ja Laskuri komponentti. Sinä määrittelet Kreivi valtio ja setCount menetelmä tilan päivittämiseksi. Sitten siirrät molemmat alas Laskuri komponentti.

The Laskuri komponentti tekee sitten Kreivi ja puhelut setCount lisäämään ja vähentämään määrää.

toimintoLaskuri({count, setCount}) {
palata (


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

Et määritellyt Kreivi muuttuva ja setCount toimivat paikallisesti sisällä Laskuri komponentti. Sen sijaan välitit sen pääkomponentista (Sovellus). Toisin sanoen käytät globaalia valtiota.

Ongelma globaalien valtioiden kanssa

Ongelma globaalin tilan käytössä on se, että tallennat tilan pääkomponenttiin (tai vanhemman pääkomponenttiin) ja sitten välittää sen eteenpäin rekvisiittana komponenttiin, jossa tätä tilaa todella tarvitaan.

Joskus tämä on hyvä, kun sinulla on tila, joka on jaettu useille komponenteille. Mutta tässä tapauksessa mikään muu komponentti ei välitä Kreivi valtio paitsi Laskuri komponentti. Siksi on parempi siirtää osavaltio Laskuri komponenttia, jossa sitä todella käytetään.

Valtion siirtäminen lapsikomponenttiin

Kun siirrät tilan kohtaan Laskuri komponentti, se näyttäisi tältä:

tuonti {useState} alkaen'reagoi'
toimintoLaskuri() {
konst [count, setCount] = useState(0)
palata (


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

Sitten sinun sisälläsi Sovellus komponenttia, sinun ei tarvitse siirtää mitään alas Laskuri komponentti:

// tuonti
toimintoSovellus(){
palata<Laskuri />
}

Laskuri toimii täsmälleen samalla tavalla kuin ennenkin, mutta suuri ero on, että kaikki osavaltiosi ovat paikallisesti tämän sisällä. Laskuri komponentti. Joten jos tarvitset toisen laskurin kotisivulla, sinulla on kaksi erillistä laskuria. Jokainen laskuri on itsenäinen ja huolehtii kaikesta omasta tilastaan.

Tilan käsittely monimutkaisemmissa sovelluksissa

Toinen tilanne, jossa käyttäisit globaalia valtiota, on lomakkeiden kanssa. The Sovellus alla oleva komponentti välittää lomaketiedot (sähköposti ja salasana) ja asetusmenetelmän Sisäänkirjautumislomake komponentti.

tuonti { useState } alkaen"reagoi";
tuonti { Sisäänkirjautumislomake } alkaen"./Sisäänkirjautumislomake";
toimintoSovellus() {
konst [formData, setFormData] = useState({
 sähköposti: "",
 Salasana: "",
 });
toimintopäivitäFormData(newData) {
 setFormData((Ed) => {
palata { ...edellinen, ...uusiData };
 });
 }
toimintoonSubmitissa() {
konsoli.log (formData);
 }
palata (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

The Sisäänkirjautumislomake komponentti ottaa sisäänkirjautumistiedot ja tekee ne. Kun lähetät lomakkeen, se kutsuu päivitäData funktio, joka myös välitetään pääkomponentista.

toimintoSisäänkirjautumislomake({ onSubmit, data, updateData }) {
toimintokäsitteleLähetä(e) {
 e.preventDefault();
 onSubmit();
 }
palata (


"sähköposti">Sähköposti</label>
 tyyppi="sähköposti"
 id="sähköposti"
 value={data.email}
 onChange={(e) => updateData({ sähköposti: e.target.value })}
 />
"Salasana">Salasana</label>
 tyyppi="Salasana"
 id="Salasana"
 value={data.salasana}
 onChange={(e) => updateData({ Salasana: e.target.value })}
 />
"Lähetä">Lähetä</button>
 </form>
 );
}

Sen sijaan, että hallitset pääkomponentin tilaa, on parempi siirtää tila LoginForm.js, jossa käytät koodia. Näin jokainen komponentti on itsenäinen, eikä se ole riippuvainen toisesta komponentista (eli pääkomponentista) tietojen suhteen. Tässä on muokattu versio Sisäänkirjautumislomake:

tuonti { useRef } alkaen"reagoi";
toimintoSisäänkirjautumislomake({Lähetä }) {
konst emailRef = useRef();
konst passwordRef = useRef();

toimintokäsitteleLähetä(e) {
 e.preventDefault();
 onSubmit({
 sähköposti: emailRef.current.value,
 salasana: passwordRef.current.value,
 });
 }
palata (


"sähköposti">Sähköposti</label>
"sähköposti" id="sähköposti" ref={emailRef} />
"Salasana">Salasana</label>
"Salasana" id="Salasana" ref={passwordRef} />
"Lähetä">Lähetä</button>
 </form>
 );
}

Täällä voit sitoa syötteen muuttujaan käyttämällä viite attribuutit ja useRef Reagoi koukkuun sen sijaan, että välität päivitysmenetelmät suoraan. Tämä auttaa poistamaan monisanaisen koodin ja optimoida lomakkeen suorituskyky useRef-koukun avulla.

Pääkomponentissa (App.js), voit poistaa sekä globaalin tilan että updateFormData() menetelmää, koska et enää tarvitse sitä. Ainoa toiminto jäljellä on onSubmit(), jota kutsut sisäpuolelta Sisäänkirjautumislomake komponentti kirjautuaksesi sisään konsoliin.

toimintoSovellus() {
toimintoonSubmitissa(formData) {
konsoli.log (formData);
 }
palata (
 data={formData}
 updateData={updateFormData}
 onSubmit={onSubmit}
 />
 );
}

Et vain tehnyt osavaltiostasi mahdollisimman paikallista, vaan poistit osavaltion tarpeen ollenkaan (ja käytit refers sen sijaan). Joten sinun Sovellus komponentti on yksinkertaistunut huomattavasti (jossa on vain yksi toiminto).

Sinun Sisäänkirjautumislomake komponentti myös yksinkertaistui, koska sinun ei tarvinnut huolehtia tilan päivittämisestä. Pikemminkin seuraat vain kahta refers, ja siinä se.

Jaetun tilan käsittely

Yksi ongelma on siinä, että osavaltiosta yritetään tehdä mahdollisimman paikallinen. Usein törmäät tilanteisiin, joissa pääkomponentti ei käytä tilaa, mutta välittää sen useille komponenteille.

Esimerkkinä on, että sinulla on a TodoContainer yläkomponentti, jossa on kaksi alakomponenttia: Tehtävälista ja TodoCount.

toimintoTodoContainer() {
konst [todos, setTodos] = useState([])
palata (
 <>


 </>
 )
}

Molemmat näistä lapsikomponenteista vaativat todos valtio, niin TodoContainer välittää sen molemmille. Tällaisissa skenaarioissa osavaltiosta on tehtävä mahdollisimman paikallinen. Yllä olevassa esimerkissä asettamalla sen sisään TodosContainer on niin paikallinen kuin voit saada.

Jos laittaisit tämän tilan omaan Sovellus komponentti, se ei olisi mahdollisimman paikallinen, koska se ei ole lähin pääkomponentti kahdelle dataa tarvitsevalle komponentille.

Suurissa sovelluksissa tilan hallinta vain -sovelluksella useState() koukku voi osoittautua vaikeaksi. Tällaisissa tapauksissa saatat joutua valitsemaan React Context API tai Reagoi Redux hallitsemaan valtiota tehokkaasti.

Lue lisää React Hookeista

Koukut muodostavat Reactin perustan. Käyttämällä koukkuja Reactissa voit välttää pitkän koodin kirjoittamisen, joka muuten käyttäisi luokkia. UseState()-koukku on kiistatta yleisimmin käytetty React-koukku, mutta on olemassa monia muita, kuten useEffect(), useRef() ja useContext().

Jos haluat oppia kehittämään sovelluksia Reactin avulla, sinun on osattava käyttää näitä koukkuja sovelluksessasi.