Opi käyttämään React 18 -koukkuja

Maaliskuussa 2022 React-tiimi ilmoitti React 18:n virallisesta julkaisusta. Tämä julkaisu sisälsi lukuisia uusia ominaisuuksia, jotka parantavat suorituskykyä "samanaikaisen renderöinnin" käsitteeseen perustuen. Samanaikaisen renderöinnin ideana on tehdä DOM: iin renderöimisestä keskeytettävä.

Uusien ominaisuuksien joukossa on viisi koukkua: useId, useTransition, useDerredValue, useSyncExternalStore ja useInsertionEffect.

Reagoi useTransition Hook

Oletuksena kaikki React-tilan päivitykset ovat kiireellisiä. Sovelluksesi eri tilapäivitykset kilpailevat samoista resursseista hidastaen sitä. UseTransition Reagoi koukku ratkaisee tämän ongelman antamalla sinun merkitä jotkin tilapäivitykset ei-kiireellisiksi. Tämä sallii kiireellisten tilapäivitysten keskeyttää ne, joilla on alhaisempi prioriteetti.

SearchPage-komponentti

Tämä yksinkertainen ohjelma jäljittelee hakukonetta, joka päivittää kaksi tilaa – syöttökentän ja jotkin hakutulokset.

tuonti { useState } alkaen "reagoi";
toimintoHakusivu() {
 const [tulo, setInput] = useState(





instagram viewer

"")
konst [lista, setList] = useState([]);
konst listakoko = 30000
toimintokahvaVaihda(e) {
setInput(e.kohde.arvo);
konst listItems = [];
varten (päästää minä = 0; i < listSize; i++){
listakohteet.työntää(e.kohde.arvo);
 }
setList (listItems);
 }
palata (
<div>
<etiketti>Hae verkosta: </label>
<syöttötyyppi="teksti" value={input} onChange={handleChange} />
{lista.map((nimike, hakemisto) => {
 palata <div avain={index}>{item}</div>
 })}
</div>
 );
}
viedäoletuksena Hakusivu;

Päivitetty sovelluskomponentti

tuonti Hakusivu alkaen "./Components/SearchPage";
toimintoSovellus() {
palata (
<div>
< Hakusivu/>
</div>
 );
}
viedäoletuksena Sovellus;

Yllä oleva koodi tekee React-sovelluksen, jossa on syöttökenttä:

Kun alat kirjoittaa merkkejä kenttään, 30 000 kopiota kirjoitetusta tekstistä näkyy alla:

Jos kirjoitat useita merkkejä nopeasti peräkkäin, sinun pitäisi havaita viive. Se vaikuttaa aikaan, jonka kuluessa merkit näkyvät sekä syöttökentässä että "hakutulosalueella". Tämä johtuu siitä, että React suorittaa molemmat tilapäivitykset samanaikaisesti.

Jos demo toimii liian hitaasti tai liian nopeasti sinulle, yritä säätää sitä listan koko arvoa vastaavasti.

UseTransition-koukun lisääminen sovellukseen antaa sinun priorisoida yhden tilapäivityksen toiseen verrattuna.

UseTransition Hookin käyttäminen

tuonti {useState, useTransition} alkaen "reagoi";
toimintoHakusivu() {
konst [isPending, startTransition] = useTransition();
 const [tulo, setInput] = useState("")
konst [lista, setList] = useState([]);
konst listakoko = 30000
toimintokahvaVaihda(e) {
setInput(e.kohde.arvo);
 aloitaTransition(() => {
konst listItems = [];
varten (päästää minä = 0; i < listSize; i++){
listakohteet.työntää(e.kohde.arvo);
 }
setList (listItems);
 });
 }
palata (
<div>
<etiketti>Hae verkosta: </label>
<syöttötyyppi="teksti" value={input} onChange={handleChange} />
{on vireillä? "...Ladataan tuloksia": list.map((nimike, hakemisto) => {
 palata <div avain={index}>{item}</div>
 })}
</div>
 );
}
viedäoletuksena Hakusivu;

Päivitetään sinun Hakusivu komponentti, jolla on yllä oleva koodi, priorisoi syöttökentän "hakutulosalueen" sijaan. Tällä yksinkertaisella muutoksella on selkeä vaikutus: sinun pitäisi alkaa nähdä syöttökenttään kirjoittamasi teksti välittömästi. Vain "hakutulosalueella" on edelleen pieni viive. Tämä johtuu siitä aloitaTransitionsovellusohjelmointirajapinta (API) UseTransition-koukusta.

Hakutulokset käyttöliittymään näyttävä koodi käyttää nyt koodia aloitaTransition API. Näin syöttökenttä voi keskeyttää hakutulosten tilanpäivityksen. Kun on vireillä() toiminto näyttää "…Ladataan tulosta" se osoittaa, että siirtyminen (tilasta toiseen) on meneillään.

Reagoi useDeferredValue Hook

UseDeferredValue-koukun avulla voit lykätä pakottamattoman tilapäivityksen uudelleenrenderöimistä. UseTransition-koukun tapaan useDeferredValue-koukku on samanaikaisuuskoukku. UseDeferredValue-koukku antaa tilan säilyttää alkuperäisen arvonsa, kun se on siirtymävaiheessa.

SearchPage-komponentti useDeferredValue()-koukun kanssa

tuonti { useState, useTransition, useDeferredValue } alkaen "reagoi";
toimintoHakusivu() {
konst [,startTransition] = useTransition();
 const [tulo, setInput] = useState("")
konst [lista, setList] = useState([]);
konst listakoko = 30000
toimintokahvaVaihda(e) {
setInput(e.kohde.arvo);
 aloitaTransition(() => {
konst listItems = [];
varten (päästää minä = 0; i < listSize; i++){
listakohteet.työntää(e.kohde.arvo);
 }
setList (listItems);
 });
 }
konst deferredValue = useDeferredValue (syöttö);
palata (
<div>
<etiketti>Hae verkosta: </label>
<syöttötyyppi="teksti" value={input} onChange={handleChange} />
{lista.map((nimike, hakemisto) => {
 palata <div key={index} input={deferredValue} >{item}</div>
 })}
</div>
 );
}
viedäoletuksena Hakusivu;

Yllä olevasta koodista näet, että on vireillä() toimintoa ei enää ole. Tämä johtuu siitä, deferredValue muuttuja useDeferredValue-koukusta korvaa on vireillä() toimii tilasiirtymän aikana. Sen sijaan, että hakutulosluettelo päivittyisi, kun kirjoitat uutta merkkiä, se säilyttää vanhat arvonsa, kunnes sovellus päivittää tilan.

Reagoi useSyncExternalStore Hook

Toisin kuin useTransition- ja useDeferredValue-koukut, jotka toimivat sovelluskoodin kanssa, useSyncExternalStore toimii kirjastojen kanssa. Sen avulla React-sovelluksesi voi tilata ja lukea tietoja ulkoisista kirjastoista. UseSyncExternalStore-koukku käyttää seuraavaa ilmoitusta:

konst tila = useSyncExternalStore (tilaa, getSnapshot[, getServerSnapshot]);

Tämä allekirjoitus sisältää seuraavat tiedot:

• osavaltio: sen tietovaraston arvo, jonka useSyncExternalStore-koukku palauttaa.
• tilata: rekisteröi takaisinsoiton, kun tietovarasto muuttuu.
• hanki Snapshot: palauttaa tietovaraston nykyisen arvon.
• getServerSnapshot: palauttaa palvelimen renderöinnin aikana käytetyn tilannevedoksen.

UseSyncExternalStoren avulla voit tilata koko tietosäilön tai tietyn kentän tietovaraston sisällä.

Reagoi useInsertionEffect Hook

UseInsertionEffect-koukku on toinen uusi React-koukku, joka toimii kirjastojen kanssa. Tietovarastojen sijaan useInsertionEffect-koukku toimii kuitenkin CSS-in-JS-kirjastojen kanssa. Tämä koukku ratkaisee tyylin renderöinnin suorituskykyongelmia. Se tyylittelee DOM: n ennen kuin lukee asettelun useLayoutEffect-koukussa.

Reagoi useId Hook

Käytät useId-koukkua tilanteissa, joissa tarvitaan yksilöllisiä tunnuksia (paitsi luettelon avaimia). Sen päätarkoitus on luoda tunnukset, jotka pysyvät yksilöllisinä asiakkaan ja palvelimen välillä, jotta vältetään React-palvelimen hydrataatiovirhe. UseId-koukku käyttää seuraavaa ilmoitusta:

konst id = useId()

Ilmoituksessa id on ainutlaatuinen merkkijono, joka sisältää : merkki. Ilmoituksen jälkeen voit läpäistä id muuttuja suoraan sitä tarvitseville elementeille.

Mitä arvoa nämä uudet koukut lisäävät reagoimiseen?

UseTransition- ja useDeferredValue-koukut ovat sovelluskoodikoukkuja. Samanaikaisuuden renderöinnillä ne parantavat sovellusten suorituskykyä. UseId-koukku korjaa nesteytysvirheen luomalla yksilöllisiä tunnuksia asiakkaalle ja palvelimelle.

UseSyncExternalStore- ja useInsertionEffect-koukut toimivat ulkoisten kirjastojen kanssa samanaikaisen hahmontamisen helpottamiseksi. UseInsertionEffect-koukku toimii CSS-in-JS-kirjastojen kanssa. UseSyncExternalStore-koukku toimii tietovarastokirjastojen, kuten Redux store, kanssa.

Yhdessä nämä koukut lisäävät merkittävästi suorituskykyä, mikä puolestaan ​​​​parantaa käyttökokemusta.