I mars 2022 tillkännagav React-teamet den officiella releasen av React 18. Den här utgåvan kom med en mängd nya funktioner inriktade på prestandaförbättringar, baserat på konceptet "samtidig rendering". Tanken bakom samtidig rendering är att göra processen för rendering till DOM avbrytbar.
Bland de nya funktionerna finns fem krokar: useId, useTransition, useDerredValue, useSyncExternalStore och useInsertionEffect.
Reagera användTransition Hook
Som standard är alla React-statusuppdateringar brådskande. Olika tillståndsuppdateringar i din applikation konkurrerar om samma resurser och saktar ner. Användningen Transition Reagera krok löser detta problem genom att låta dig markera vissa tillståndsuppdateringar som icke-brådskande. Detta tillåter brådskande tillståndsuppdateringar att avbryta de med lägre prioritet.
Söksidans komponent
Det här enkla programmet imiterar en sökmotor som uppdaterar två tillstånd – ett inmatningsfält och några sökresultat.
importera { useState } från "reagera";
fungeraSöksida() {
const [input, setInput] = useState("")
konst [lista, setList] = useState([]);konst listSize = 30000
fungerahandtag Ändra(e) {
setInput(e.mål.värde);
konst listItems = [];för (låta jag = 0; i < listSize; i++){
listItems.tryck(e.mål.värde);
}setList (listItems);
}lämna tillbaka (
<div>
<märka>Sök på webben: </label>
<ingångstyp="text" value={input} onChange={handleChange} />
{lista.map((artikel, index) => {
lämna tillbaka <div nyckel={index}>{Artikel}</div>
})}
</div>
);
}
exporterastandard Söksida;
Den uppdaterade appkomponenten
importera Söksida från "./Components/SearchPage";fungeraApp() {
lämna tillbaka (
<div>
< Söksida/>
</div>
);
}
exporterastandard App;
Koden ovan återger en React-applikation med ett inmatningsfält:
När du börjar skriva tecken i fältet kommer 30 000 kopior av den inskrivna texten att visas nedan:
Om du skriver flera tecken i snabb följd bör du upptäcka en fördröjning. Det påverkar hur lång tid det tar för tecken att visas i både inmatningsfältet och "sökresultatområdet". Detta beror på att React kör båda tillståndsuppdateringarna samtidigt.
Om demon går för långsamt eller för snabbt för dig, försök att justera liststorlek värde i enlighet därmed.
Genom att infoga useTransition-kroken i applikationen kan du prioritera en tillståndsuppdatering framför den andra.
Använda useTransition Hook
importera {useState, useTransition} från "reagera";fungeraSöksida() {
konst [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
konst [lista, setList] = useState([]);konst listSize = 30000
fungerahandtag Ändra(e) {
setInput(e.mål.värde);
startTransition(() => {
konst listItems = [];för (låta jag = 0; i < listSize; i++){
listItems.tryck(e.mål.värde);
}setList (listItems);
});
}lämna tillbaka (
<div>
<märka>Sök på webben: </label>
<ingångstyp="text" value={input} onChange={handleChange} />{väntar? "... Laddar resultat": list.map((objekt, index) => {
lämna tillbaka <div nyckel={index}>{Artikel}</div>
})}
</div>
);
}
exporterastandard Söksida;
Uppdaterar din Söksida komponent med koden ovan kommer att prioritera inmatningsfältet framför "sökresultatområdet". Denna enkla ändring har en tydlig effekt: du bör börja se texten som du skriver i inmatningsfältet omedelbart. Endast "sökresultatområdet" kommer fortfarande att ha en liten fördröjning. Detta beror på startaTransitionapplikationsprogrammeringsgränssnitt (API) från useTransition-kroken.
Koden som återger sökresultaten till användargränssnittet använder nu startaTransition API. Detta gör att inmatningsfältet kan avbryta sökresultatens statusuppdatering. När väntar() funktionen visar "... Laddar resultat" det indikerar att en övergång (från ett tillstånd till nästa) sker.
Reagera användDeferredValue Hook
UseDeferredValue-kroken låter dig skjuta upp återrenderingen av en icke-uppfordrad tillståndsuppdatering. Liksom useTransition-kroken är useDeferredValue-kroken en samtidighetskrok. UseDeferredValue-kroken tillåter ett tillstånd att behålla sitt ursprungliga värde medan det är i övergång.
SearchPage-komponenten med useDeferredValue()-kroken
importera { useState, useTransition, useDeferredValue } från "reagera";fungeraSöksida() {
konst [,startTransition] = useTransition();
const [input, setInput] = useState("")
konst [lista, setList] = useState([]);konst listSize = 30000
fungerahandtag Ändra(e) {
setInput(e.mål.värde);
startTransition(() => {
konst listItems = [];för (låta jag = 0; i < listSize; i++){
listItems.tryck(e.mål.värde);
}setList (listItems);
});
}
konst deferredValue = useDeferredValue (ingång);
lämna tillbaka (
<div>
<märka>Sök på webben: </label>
<ingångstyp="text" value={input} onChange={handleChange} />{lista.map((artikel, index) => {
lämna tillbaka <div nyckel={index} input={deferredValue} >{Artikel}</div>
})}
</div>
);
}
exporterastandard Söksida;
I koden ovan ser du att väntar() funktionen finns inte längre. Detta beror på att deferredValue variabel från useDeferredValue-kroken ersätter väntar() funktion under tillståndsövergång. Istället för att sökresultatlistan uppdateras när du skriver ett nytt tecken, kommer den att behålla sina gamla värden tills programmet uppdaterar statusen.
Reagera användSyncExternalStore Hook
Till skillnad från useTransition- och useDeferredValue-krokarna som fungerar med applikationskod, fungerar useSyncExternalStore med bibliotek. Det låter din React-applikation prenumerera på och läsa data från externa bibliotek. UseSyncExternalStore-kroken använder följande deklaration:
konst state = useSyncExternalStore (prenumerera, getSnapshot[, getServerSnapshot]);Denna signatur innehåller följande:
- stat: värdet på datalagret som useSyncExternalStore-kroken returnerar.
- prenumerera: registrerar ett återuppringning när datalagret ändras.
- getSnapshot: returnerar datalagrets aktuella värde.
- getServerSnapshot: returnerar ögonblicksbilden som användes under serverrenderingen.
Med useSyncExternalStore kan du prenumerera på ett helt datalager eller ett specifikt fält i ett datalager.
Reager useInsertionEffect Hook
useInsertionEffect-kroken är en annan ny React-krok som fungerar med bibliotek. Men istället för datalagringar fungerar useInsertionEffect-kroken med CSS-in-JS-bibliotek. Den här kroken åtgärdar prestandaproblem med stilrendering. Den stilar DOM innan den läser layouten i useLayoutEffect-kroken.
Reagera useId Hook
Du använder useId-kroken i situationer som kräver unika ID: n (förutom nycklar i en lista). Dess huvudsakliga syfte är att generera ID: n som förblir unika över klient och server, vilket undviker React-serverns hydreringsfelmatchningsfel. UseId-kroken använder följande deklaration:
konst id = useId()I deklarationen id är en unik sträng som inkluderar : token. Efter deklaration kan du godkänna id variabel direkt till det eller de element som behöver det.
Vilket värde tillför dessa nya krokar för att Reagera?
UseTransition- och useDeferredValue-krokarna är applikationskodhakar. Genom samtidig rendering förbättrar de applikationernas prestanda. UseId-kroken tar itu med hydratiseringsfelet genom att skapa unika ID: n över klient och server.
UseSyncExternalStore och useInsertionEffect-kroken fungerar med externa bibliotek för att underlätta samtidig rendering. UseInsertionEffect-kroken fungerar med CSS-in-JS-bibliotek. UseSyncExternalStore-kroken fungerar med datalagringsbibliotek som Redux-butiken.
Tillsammans ger dessa krokar en rejäl boost till prestanda, vilket i sin tur förbättrar användarupplevelsen.
