Lær hvordan du bruker React 18 Hooks

I mars 2022 kunngjorde React-teamet den offisielle utgivelsen av React 18. Denne utgivelsen kom med en rekke nye funksjoner rettet mot ytelsesforbedring, basert på konseptet "samtidig gjengivelse". Ideen bak samtidig gjengivelse er å gjøre prosessen med gjengivelse til DOM avbrytbar.

Blant de nye funksjonene er fem kroker: useId, useTransition, useDerredValue, useSyncExternalStore og useInsertionEffect.

Reager brukTransition Hook

Som standard haster alle React-statusoppdateringer. Ulike tilstandsoppdateringer i applikasjonen din konkurrerer om de samme ressursene, og reduserer hastigheten. Bruken Transition Reagerkrok løser dette problemet ved å la deg merke noen delstatsoppdateringer som ikke-haster. Dette gjør at presserende tilstandsoppdateringer kan avbryte de med lavere prioritet.

Søkesidekomponenten

Dette enkle programmet imiterer en søkemotor som oppdaterer to tilstander – et inndatafelt og noen søkeresultater.

import { useState } fra "reagere";
funksjonSøkeside() {
 const [input, setInput] = useState(





instagram viewer

"")
konst [liste, setList] = brukState([]);
konst listestørrelse = 30000
funksjonhandleEndre(e) {
setInput(e.mål.verdi);
konst listItems = [];
til (la jeg = 0; i < listestørrelse; i++){
listeelementer.trykk(e.mål.verdi);
 }
setList (listItems);
 }
komme tilbake (
<div>
<merkelapp>Søke på nettet: </label>
<input type="tekst" verdi={input} onChange={handleChange} />
{liste.map((vare, indeks) => {
 komme tilbake <div nøkkel={indeks}>{punkt}</div>
 })}
</div>
 );
}
eksportmisligholde Søkeside;

Den oppdaterte appkomponenten

import Søkeside fra "./Components/SearchPage";
funksjonApp() {
komme tilbake (
<div>
< Søkeside/>
</div>
 );
}
eksportmisligholde App;

Koden ovenfor gjengir en React-applikasjon med et inndatafelt:

Når du begynner å skrive tegn i feltet, vil 30 000 kopier av den skrevne teksten vises nedenfor:

Hvis du skriver inn flere tegn raskt etter hverandre, bør du oppdage en forsinkelse. Det påvirker tiden det tar før tegn vises i både inndatafeltet og "søkeresultatområdet". Dette er fordi React kjører begge tilstandsoppdateringene samtidig.

Hvis demoen kjører for sakte eller for raskt for deg, prøv å finjustere listestørrelse verdi tilsvarende.

Å sette inn useTransition-kroken i applikasjonen vil tillate deg å prioritere en tilstandsoppdatering fremfor den andre.

Bruk av useTransition Hook

import {useState, useTransition} fra "reagere";
funksjonSøkeside() {
konst [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [liste, setList] = brukState([]);
konst listestørrelse = 30000
funksjonhandleEndre(e) {
setInput(e.mål.verdi);
 startTransition(() => {
konst listItems = [];
til (la jeg = 0; i < listestørrelse; i++){
listeelementer.trykk(e.mål.verdi);
 }
setList (listItems);
 });
 }
komme tilbake (
<div>
<merkelapp>Søke på nettet: </label>
<input type="tekst" verdi={input} onChange={handleChange} />
{erPending? "...Laster resultater": list.map((element, indeks) => {
 komme tilbake <div nøkkel={indeks}>{punkt}</div>
 })}
</div>
 );
}
eksportmisligholde Søkeside;

Oppdaterer din Søkeside komponent med koden ovenfor vil prioritere inndatafeltet over "søkeresultatområdet". Denne enkle endringen har en klar effekt: du bør begynne å se teksten du skriver inn i inntastingsfeltet umiddelbart. Bare "søkeresultatområdet" vil fortsatt ha en liten forsinkelse. Dette er på grunn av startTransitionapplikasjonsprogrammeringsgrensesnitt (API) fra bruksovergangskroken.

Koden som gjengir søkeresultatene til brukergrensesnittet bruker nå startTransition API. Dette lar inndatafeltet avbryte søkeresultatets tilstandsoppdatering. Når erPending() funksjonen viser "...Laster resultat" den indikerer at en overgang (fra en tilstand til den neste) skjer.

Reager brukDeferredValue Hook

UseDeferredValue-kroken lar deg utsette gjengivelsen av en ikke-oppfordret tilstandsoppdatering. I likhet med useTransition-kroken, er useDeferredValue-kroken en samtidighetskrok. UseDeferredValue-kroken lar en tilstand beholde sin opprinnelige verdi mens den er i overgang.

SearchPage-komponenten med useDeferredValue()-kroken

import { useState, useTransition, useDeferredValue } fra "reagere";
funksjonSøkeside() {
konst [,startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [liste, setList] = brukState([]);
konst listestørrelse = 30000
funksjonhandleEndre(e) {
setInput(e.mål.verdi);
 startTransition(() => {
konst listItems = [];
til (la jeg = 0; i < listestørrelse; i++){
listeelementer.trykk(e.mål.verdi);
 }
setList (listItems);
 });
 }
konst deferredValue = useDeferredValue (inndata);
komme tilbake (
<div>
<merkelapp>Søke på nettet: </label>
<input type="tekst" verdi={input} onChange={handleChange} />
{liste.map((vare, indeks) => {
 komme tilbake <div key={index} input={deferredValue} >{punkt}</div>
 })}
</div>
 );
}
eksportmisligholde Søkeside;

I koden ovenfor vil du se at erPending() funksjonen eksisterer ikke lenger. Dette er fordi utsatt verdi variabel fra useDeferredValue-kroken erstatter erPending() funksjon under tilstandsovergang. I stedet for at søkeresultatlisten oppdateres når du skriver inn et nytt tegn, vil den beholde sine gamle verdier til applikasjonen oppdaterer tilstanden.

Reager brukSyncExternalStore Hook

I motsetning til useTransition- og useDeferredValue-krokene som fungerer med applikasjonskode, fungerer useSyncExternalStore med biblioteker. Den lar React-applikasjonen din abonnere på og lese data fra eksterne biblioteker. useSyncExternalStore-kroken bruker følgende erklæring:

konst state = useSyncExternalStore (abonner, getSnapshot[, getServerSnapshot]);

Denne signaturen inneholder følgende:

• stat: verdien av datalageret som useSyncExternalStore-kroken returnerer.
• abonnere: registrerer tilbakeringing når datalageret endres.
• få et øyeblikksbilde: returnerer datalagerets gjeldende verdi.
• getServerSnapshot: returnerer øyeblikksbildet som ble brukt under servergjengivelse.

Med useSyncExternalStore kan du abonnere på et helt datalager eller et spesifikt felt i et datalager.

Reager brukInsertionEffect Hook

useInsertionEffect-kroken er en annen ny React-krok som fungerer med biblioteker. Imidlertid, i stedet for datalagre, fungerer useInsertionEffect-kroken med CSS-in-JS-biblioteker. Denne kroken løser ytelsesproblemer med stilgjengivelse. Den stiler DOM før du leser oppsettet i useLayoutEffect-kroken.

Reager useId Hook

Du bruker useId-kroken i situasjoner som krever unike IDer (unntatt nøkler i en liste). Hovedformålet er å generere ID-er som forblir unike på tvers av klient og server, og unngår feilen for React-serverhydrering. UseId-kroken bruker følgende erklæring:

konst id = useId()

I erklæringen id er en unik streng som inkluderer : token. Etter erklæring kan du bestå id variabel direkte til elementet/elementene som trenger det.

Hvilken verdi gir disse nye krokene for å reagere?

UseTransition- og useDeferredValue-krokene er applikasjonskodekroker. Gjennom samtidig gjengivelse forbedrer de ytelsen til applikasjoner. UseId-kroken takler hydreringsfeilen ved å lage unike IDer på tvers av klient og server.

useSyncExternalStore og useInsertionEffect-krokene fungerer med eksterne biblioteker for å lette samtidig gjengivelse. useInsertionEffect-kroken fungerer med CSS-in-JS-biblioteker. UseSyncExternalStore-kroken fungerer med datalagerbiblioteker som Redux-butikken.

Sammen gir disse krokene et kraftig løft til ytelsen, som igjen forbedrer brukeropplevelsen.