I marts 2022 annoncerede React-teamet den officielle udgivelse af React 18. Denne udgivelse kom med et væld af nye funktioner rettet mod forbedring af ydeevnen, baseret på konceptet "samtidig gengivelse". Ideen bag samtidig gengivelse er at gøre processen med gengivelse til DOM afbrydelig.
Blandt de nye funktioner er fem kroge: useId, useTransition, useDerredValue, useSyncExternalStore og useInsertionEffect.
Reager brug Transition Hook
Som standard haster alle React-tilstandsopdateringer. Forskellige tilstandsopdateringer i din applikation konkurrerer om de samme ressourcer, hvilket gør det langsommere. Brugen Transition Reaktionskrog løser dette problem ved at lade dig markere nogle tilstandsopdateringer som ikke-haste. Dette gør det muligt for presserende tilstandsopdateringer at afbryde dem med en lavere prioritet.
Søgesidekomponenten
Dette enkle program efterligner en søgemaskine, der opdaterer to tilstande - et inputfelt og nogle søgeresultater.
importere { useState } fra "reagere";
fungereSøgeside() {
const [input, setInput] = useState("")
konst [liste, setList] = useState([]);konst listestørrelse = 30000
fungerehåndtag Skift(e) {
sætIndgang(e.mål.værdi);
konst listItems = [];til (lade i = 0; i < listeStørrelse; i++){
listeelementer.skubbe(e.mål.værdi);
}setList (listItems);
}Vend tilbage (
<div>
<etiket>Søg på nettet: </label>
<input type="tekst" værdi={input} onChange={handleChange} />
{liste.map((vare, indeks) => {
Vend tilbage <div nøgle={indeks}>{vare}</div>
})}
</div>
);
}
eksportStandard Søgeside;
Den opdaterede app-komponent
importere Søgeside fra "./Components/SearchPage";fungereApp() {
Vend tilbage (
<div>
< Søgeside/>
</div>
);
}
eksportStandard App;
Ovenstående kode gengiver en React-applikation med et inputfelt:
Når du begynder at skrive tegn i feltet, vises 30.000 kopier af den indtastede tekst nedenfor:
Hvis du skriver flere tegn hurtigt efter hinanden, bør du opdage en forsinkelse. Det påvirker den tid, det tager for tegn at blive vist i både inputfeltet og "søgeresultatområdet". Dette skyldes, at React kører begge tilstandsopdateringer på samme tid.
Hvis demoen kører for langsomt eller for hurtigt for dig, så prøv at justere listestørrelse værdi i overensstemmelse hermed.
Indsættelse af useTransition-krogen i applikationen giver dig mulighed for at prioritere en tilstandsopdatering frem for den anden.
Brug af useTransition Hook
importere {useState, useTransition} fra "reagere";fungereSøgeside() {
konst [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
konst [liste, setList] = useState([]);konst listestørrelse = 30000
fungerehåndtag Skift(e) {
sætIndgang(e.mål.værdi);
startTransition(() => {
konst listItems = [];til (lade i = 0; i < listeStørrelse; i++){
listeelementer.skubbe(e.mål.værdi);
}setList (listItems);
});
}Vend tilbage (
<div>
<etiket>Søg på nettet: </label>
<input type="tekst" værdi={input} onChange={handleChange} />{afventer? "...Indlæser resultater": list.map((vare, indeks) => {
Vend tilbage <div nøgle={indeks}>{vare}</div>
})}
</div>
);
}
eksportStandard Søgeside;
Opdaterer din Søgeside komponent med koden ovenfor vil prioritere inputfeltet over "søgeresultatområdet". Denne enkle ændring har en klar effekt: du skal begynde at se den tekst, du skriver i inputfeltet med det samme. Kun "søgeresultatområdet" vil stadig have en lille forsinkelse. Dette skyldes startTransitionApplication Programming Interface (API) fra brugsovergangskrogen.
Koden, der gengiver søgeresultaterne til brugergrænsefladen, bruger nu startTransition API. Dette gør det muligt for inputfeltet at afbryde søgeresultaternes tilstandsopdatering. Når erPending() funktionen viser "...Loading result" det indikerer, at en overgang (fra en tilstand til den næste) sker.
Reager brug DeferredValue Hook
UseDeferredValue-krogen giver dig mulighed for at udsætte gengivelsen af en ikke-opfordret tilstandsopdatering. Ligesom useTransition-krogen er useDeferredValue-krogen en samtidighedskrog. UseDeferredValue-krogen tillader en tilstand at beholde sin oprindelige værdi, mens den er i overgang.
SearchPage-komponenten med useDeferredValue()-krogen
importere { useState, useTransition, useDeferredValue } fra "reagere";fungereSøgeside() {
konst [,startTransition] = useTransition();
const [input, setInput] = useState("")
konst [liste, setList] = useState([]);konst listestørrelse = 30000
fungerehåndtag Skift(e) {
sætIndgang(e.mål.værdi);
startTransition(() => {
konst listItems = [];til (lade i = 0; i < listeStørrelse; i++){
listeelementer.skubbe(e.mål.værdi);
}setList (listItems);
});
}
konst deferredValue = useDeferredValue (input);
Vend tilbage (
<div>
<etiket>Søg på nettet: </label>
<input type="tekst" værdi={input} onChange={handleChange} />{liste.map((vare, indeks) => {
Vend tilbage <div nøgle={indeks} input={deferredValue} >{vare}</div>
})}
</div>
);
}
eksportStandard Søgeside;
I koden ovenfor vil du se, at erPending() funktion eksisterer ikke længere. Dette er fordi udskudtVærdi variabel fra useDeferredValue-krogen erstatter erPending() funktion under tilstandsovergang. I stedet for at søgeresultatlisten opdateres, når du skriver et nyt tegn, beholder den sine gamle værdier, indtil applikationen opdaterer tilstanden.
Reager brug SyncExternalStore Hook
I modsætning til useTransition og useDeferredValue hooks, der fungerer med applikationskode, fungerer useSyncExternalStore med biblioteker. Det giver din React-applikation mulighed for at abonnere på og læse data fra eksterne biblioteker. UseSyncExternalStore-krogen bruger følgende erklæring:
konst state = useSyncExternalStore (abonner, getSnapshot[, getServerSnapshot]);Denne signatur indeholder følgende:
- stat: værdien af datalageret, som useSyncExternalStore-hook returnerer.
- abonnere: registrerer et tilbagekald, når datalageret ændres.
- få et øjebliksbillede: returnerer datalagerets aktuelle værdi.
- getServerSnapshot: returnerer det øjebliksbillede, der blev brugt under servergengivelsen.
Med useSyncExternalStore kan du abonnere på et helt datalager eller et specifikt felt i et datalager.
Reager brugInsertionEffect Hook
useInsertionEffect hook er en anden ny React hook, der fungerer med biblioteker. Men i stedet for datalagre fungerer useInsertionEffect-krogen med CSS-in-JS-biblioteker. Denne krog løser problemer med ydeevne med stilgengivelse. Den stiler DOM'en, før den læser layoutet i useLayoutEffect-krogen.
Reager useId Hook
Du bruger useId-krogen i situationer, der kræver unikke ID'er (undtagen nøgler på en liste). Dens hovedformål er at generere ID'er, der forbliver unikke på tværs af klient og server, og undgår React-serverens hydreringsfejl. UseId-krogen bruger følgende erklæring:
konst id = useId()I erklæringen id er en unik streng, der inkluderer : polet. Efter erklæring kan du bestå id variabel direkte til det eller de elementer, der har brug for det.
Hvilken værdi tilføjer disse nye kroge for at reagere?
useTransition- og useDeferredValue-krogene er applikationskodekroge. Gennem samtidig gengivelse forbedrer de applikationernes ydeevne. UseId-krogen tackler hydreringsmismatch-fejlen ved at skabe unikke ID'er på tværs af klient og server.
useSyncExternalStore og useInsertionEffect-hooks arbejder med eksterne biblioteker for at lette samtidig gengivelse. useInsertionEffect-krogen fungerer med CSS-in-JS-biblioteker. UseSyncExternalStore-krogen fungerer med datalagerbiblioteker som Redux-butik.
Sammen giver disse kroge et stort løft til ydeevnen, hvilket igen forbedrer brugeroplevelsen.
