Uzziniet, kā izmantot React 18 āķus

2022. gada martā React komanda paziņoja par React 18 oficiālo izlaišanu. Šajā laidienā ir iekļauta virkne jaunu funkciju, kas paredzētas veiktspējas uzlabošanai, pamatojoties uz “vienlaicīgas renderēšanas” koncepciju. Vienlaicīgas renderēšanas ideja ir padarīt DOM renderēšanas procesu pārtraucamu.

Starp jaunajām funkcijām ir pieci āķi: useId, useTransition, useDerredValue, useSyncExternalStore un useInsertionEffect.

Reaģēt useTransition Hook

Pēc noklusējuma visi React stāvokļa atjauninājumi ir steidzami. Dažādi statusa atjauninājumi jūsu lietojumprogrammā sacenšas par tiem pašiem resursiem, palēninot to. UseTransition Reakcijas āķis atrisina šo problēmu, ļaujot atzīmēt dažus stāvokļa atjauninājumus kā nesteidzamus. Tas ļauj steidzamiem stāvokļa atjauninājumiem pārtraukt tos, kuriem ir zemāka prioritāte.

SearchPage komponents

Šī vienkāršā programma imitē meklētājprogrammu, kas atjaunina divus stāvokļus — ievades lauku un dažus meklēšanas rezultātus.

imports { useState } no "reaģēt";
funkcijaMeklēšanas lapa() 





instagram viewer
{
 const [input, setInput] = useState("")
konst [sarakstu, setList] = useState([]);
konst saraksta izmērs = 30000
funkcijarokturisMainīt(e) {
setInput(e.target.vērtība);
konst listItems = [];
priekš (ļaut i = 0; i < listSize; i++){
vienumu saraksts.spiediet(e.target.vērtība);
 }
setList (listItems);
 }
atgriezties (
<div>
<etiķete>Meklēt tīmeklī: </label>
<ievades veids="tekstu" value={input} onChange={handleChange} />
{sarakstu.map((vienums, indekss) => {
 atgriezties <div atslēga={index}>{lieta}</div>
 })}
</div>
 );
}
eksportētnoklusējuma SearchPage;

Atjauninātais lietotnes komponents

imports Meklēšanas lapa no "./Components/SearchPage";
funkcijaApp() {
atgriezties (
<div>
< Meklēšanas lapa/>
</div>
 );
}
eksportētnoklusējuma Lietotne;

Iepriekš minētais kods atveido React lietojumprogrammu ar ievades lauku:

Kad sākat rakstīt laukā rakstzīmes, tālāk tiks parādīti 30 000 drukātā teksta kopiju:

Ja ātri pēc kārtas ierakstāt vairākas rakstzīmes, jums vajadzētu pamanīt aizkavi. Tas ietekmē laiku, kas nepieciešams, lai rakstzīmes parādās gan ievades laukā, gan “meklēšanas rezultātu apgabalā”. Tas ir tāpēc, ka React vienlaikus palaiž abus stāvokļa atjauninājumus.

Ja demonstrācija darbojas pārāk lēni vai pārāk ātri, mēģiniet pielāgot saraksta izmērs vērtību atbilstoši.

Lietojumprogrammā ievietojot āķi useTransition, varēsit piešķirt prioritāti vienam stāvokļa atjauninājumam, nevis otram.

Izmantojot useTransition Hook

imports {useState, useTransition} no "reaģēt";
funkcijaMeklēšanas lapa() {
konst [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [sarakstu, setList] = useState([]);
konst saraksta izmērs = 30000
funkcijarokturisMainīt(e) {
setInput(e.target.vērtība);
 startTransition(() => {
konst listItems = [];
priekš (ļaut i = 0; i < listSize; i++){
vienumu saraksts.spiediet(e.target.vērtība);
 }
setList (listItems);
 });
 }
atgriezties (
<div>
<etiķete>Meklēt tīmeklī: </label>
<ievades veids="tekstu" value={input} onChange={handleChange} />
{isPending? "...Notiek rezultātu ielāde": list.map((prece, index) => {
 atgriezties <div atslēga={index}>{lieta}</div>
 })}
</div>
 );
}
eksportētnoklusējuma SearchPage;

Notiek jūsu Meklēšanas lapa komponents ar iepriekš minēto kodu piešķirs prioritāti ievades laukam, nevis meklēšanas rezultātu apgabalam. Šīm vienkāršajām izmaiņām ir skaidrs efekts: jums nekavējoties jāsāk redzēt ievades laukā ievadīto tekstu. Tikai “meklēšanas rezultātu apgabalā” joprojām būs neliela aizkave. Tas ir saistīts ar sāktPārejalietojumprogrammu saskarne (API) no useTransition āķa.

Kods, kas atveido meklēšanas rezultātus lietotāja saskarnē, tagad izmanto sāktPāreja API. Tas ļauj ievades laukam pārtraukt meklēšanas rezultātu stāvokļa atjaunināšanu. Kad gaida() funkcija parāda “...Ielādē rezultātu”, tas norāda, ka notiek pāreja (no viena stāvokļa uz nākamo).

Reaģēt useDeferredValue Hook

UseDeferredValue āķis ļauj atlikt nesteidzināta stāvokļa atjauninājuma atkārtotu renderēšanu. Tāpat kā useTransition āķis, arī useDeferredValue āķis ir vienlaicības āķis. UseDeferredValue āķis ļauj stāvoklim saglabāt sākotnējo vērtību, kamēr tas atrodas pārejas posmā.

SearchPage komponents ar useDeferredValue() āķi

imports { useState, useTransition, useDeferredValue } no "reaģēt";
funkcijaMeklēšanas lapa() {
konst [,startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [sarakstu, setList] = useState([]);
konst saraksta izmērs = 30000
funkcijarokturisMainīt(e) {
setInput(e.target.vērtība);
 startTransition(() => {
konst listItems = [];
priekš (ļaut i = 0; i < listSize; i++){
vienumu saraksts.spiediet(e.target.vērtība);
 }
setList (listItems);
 });
 }
konst deferredValue = useDeferredValue (ievade);
atgriezties (
<div>
<etiķete>Meklēt tīmeklī: </label>
<ievades veids="tekstu" value={input} onChange={handleChange} />
{sarakstu.map((vienums, indekss) => {
 atgriezties <div atslēga={index} input={deferredValue} >{lieta}</div>
 })}
</div>
 );
}
eksportētnoklusējuma SearchPage;

Iepriekš esošajā kodā redzēsit, ka gaida() funkcija vairs nepastāv. Tas ir tāpēc, ka deferredValue mainīgais no useDeferredValue āķa aizstāj gaida() funkcija stāvokļa pārejas laikā. Tā vietā, lai meklēšanas rezultātu saraksts tiktu atsvaidzināts, ievadot jaunu rakstzīmi, tas saglabās savas vecās vērtības, līdz lietojumprogramma atjauninās statusu.

Reaģējiet uz useSyncExternalStore Hook

Atšķirībā no useTransition un useDeferredValue āķiem, kas darbojas ar lietojumprogrammas kodu, useSyncExternalStore darbojas ar bibliotēkām. Tas ļauj jūsu React lietojumprogrammai abonēt un lasīt datus no ārējām bibliotēkām. Āķis useSyncExternalStore izmanto šādu deklarāciju:

konst stāvoklis = useSyncExternalStore (abonēt, getSnapshot[, getServerSnapshot]);

Šis paraksts satur šādu informāciju:

• Valsts: tā datu krātuves vērtība, kuru atgriež useSyncExternalStore āķis.
• abonēt: reģistrē atzvanīšanu, kad mainās datu krātuve.
• getSnapshot: atgriež datu krātuves pašreizējo vērtību.
• getServerSnapshot: atgriež momentuzņēmumu, kas izmantots servera renderēšanas laikā.

Izmantojot useSyncExternalStore, varat abonēt visu datu krātuvi vai konkrētu lauku datu krātuvē.

Reaģēt UseInsertionEffect Hook

UseInsertionEffect āķis ir vēl viens jauns React āķis, kas darbojas ar bibliotēkām. Tomēr datu krātuves vietā useInsertionEffect āķis darbojas ar CSS-in-JS bibliotēkām. Šis āķis risina stila renderēšanas veiktspējas problēmas. Tas veido DOM stilus pirms izkārtojuma nolasīšanas āķī useLayoutEffect.

Reaģēt useId Hook

Jūs izmantojat āķi useId situācijās, kurās nepieciešami unikāli ID (izņemot atslēgas sarakstā). Tās galvenais mērķis ir ģenerēt ID, kas paliek unikāli visā klientā un serverī, izvairoties no React servera hidratācijas neatbilstības kļūdas. UseId āķis izmanto šādu deklarāciju:

konst id = useId()

Deklarācijā id ir unikāla virkne, kas ietver : žetons. Pēc deklarēšanas jūs varat nokārtot id mainīgo tieši uz elementu(-iem), kam tas ir nepieciešams.

Kādu vērtību šie jaunie āķi pievieno reakcijai?

UseTransition un useDeferredValue āķi ir lietojumprogrammas koda āķi. Izmantojot vienlaicīgu renderēšanu, tie uzlabo lietojumprogrammu veiktspēju. UseId āķis novērš hidratācijas neatbilstības kļūdu, izveidojot unikālus ID klientiem un serveriem.

UseSyncExternalStore un useInsertionEffect āķi darbojas ar ārējām bibliotēkām, lai atvieglotu vienlaicīgu renderēšanu. UseInsertionEffect āķis darbojas ar CSS-in-JS bibliotēkām. UseSyncExternalStore āķis darbojas ar datu krātuves bibliotēkām, piemēram, Redux veikalu.

Kopā šie āķi ievērojami uzlabo veiktspēju, kas savukārt uzlabo lietotāja pieredzi.