Marca 2022 je ekipa React objavila uradno izdajo React 18. Ta izdaja je prišla z vrsto novih funkcij, usmerjenih v izboljšanje zmogljivosti, ki temeljijo na konceptu "hkratnega upodabljanja". Ideja sočasnega upodabljanja je narediti proces upodabljanja v DOM prekinljiv.

Med novimi funkcijami je pet kavljev: useId, useTransition, useDerredValue, useSyncExternalStore in useInsertionEffect.

React useTransition Hook

Privzeto so vse posodobitve stanja React nujne. Različne posodobitve stanja v vaši aplikaciji tekmujejo za iste vire in jo upočasnjujejo. Prehod uporabe React kavelj reši to težavo tako, da vam omogoči, da nekatere posodobitve stanja označite kot nenujne. To omogoča, da nujne posodobitve stanja prekinejo tiste z nižjo prioriteto.

Komponenta SearchPage

Ta preprost program posnema iskalnik, ki posodablja dve stanji – vnosno polje in nekaj rezultatov iskanja.

uvoz {useState} od "reagirati";
funkcijoSearchPage() {
 const [input, setInput] = useState("")
konst [seznam, setList] = useState([]);





instagram viewer



konst velikost seznama = 30000


funkcijohandleChange(e) {
setInput(e.cilj.vrednost);
konst predmeti seznama = [];


za (pustiti i = 0; i < listSize; i++){
listItems.potisnite(e.cilj.vrednost);
 }


setList (listItems);
 }


vrnitev (
<razdel>
<etiketo>Išči po spletu: </label>
<vrsta vnosa="besedilo" value={input} onChange={handleChange} />
{seznam.map((predmet, indeks) => {
 vrnitev <ključ div={index}>{item}</div>
 })}
</div>
 );
}
izvozprivzeto SearchPage;

Posodobljena komponenta aplikacije

uvoz SearchPage od "./Components/SearchPage";
funkcijoApp() {
vrnitev (
<razdel>
< SearchPage/>
</div>
 );
}
izvozprivzeto aplikacija;

Zgornja koda upodablja aplikacijo React z vnosnim poljem:

Ko začnete vnašati znake v polje, se spodaj prikaže 30.000 kopij vnesenega besedila:

Če hitro zaporedoma vnesete več znakov, bi morali opaziti zamudo. Vpliva na čas, v katerem se znaki pojavijo v vnosnem polju in v »območju rezultatov iskanja«. To je zato, ker React izvaja obe posodobitvi stanja hkrati.

Če demo deluje prepočasi ali prehitro za vas, poskusite prilagoditi velikost seznama ustrezno vrednost.

Če v aplikacijo vstavite kavelj useTransition, boste lahko dali prednost eni posodobitvi stanja pred drugo.

Uporaba useTransition Hook

uvoz {useState, useTransition} od "reagirati";
funkcijoSearchPage() {
konst [isPending, startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [seznam, setList] = useState([]);


konst velikost seznama = 30000


funkcijohandleChange(e) {
setInput(e.cilj.vrednost);
 startTransition(() => {
konst predmeti seznama = [];


za (pustiti i = 0; i < listSize; i++){
listItems.potisnite(e.cilj.vrednost);
 }


setList (listItems);
 });
 }


vrnitev (
<razdel>
<etiketo>Išči po spletu: </label>
<vrsta vnosa="besedilo" value={input} onChange={handleChange} />


{isPending? "...Nalaganje rezultatov": list.map((postavka, indeks) => {
 vrnitev <ključ div={index}>{item}</div>
 })}
</div>
 );
}
izvozprivzeto SearchPage;

Posodabljanje vašega SearchPage komponenta z zgornjo kodo bo dala prednost vnosnemu polju pred "območjem rezultatov iskanja". Ta preprosta sprememba ima jasen učinek: takoj bi morali začeti videti besedilo, ki ga vnesete v vnosno polje. Samo »območje rezultatov iskanja« bo še vedno imelo rahlo zamudo. To je posledica startTransitionaplikacijski programski vmesnik (API) iz kavelj useTransition.

Koda, ki upodablja rezultate iskanja v uporabniški vmesnik, zdaj uporablja startTransition API. To omogoča, da vnosno polje prekine posodobitev stanja rezultatov iskanja. Ko čaka () funkcija prikaže "... Rezultat nalaganja", kar pomeni, da se dogaja prehod (iz enega stanja v drugo).

React useDeferredValue Hook

Kavelj useDeferredValue vam omogoča, da odložite ponovno upodabljanje nenujne posodobitve stanja. Tako kot kavelj useTransition je tudi kavelj useDeferredValue kavelj sočasnosti. Kavelj useDeferredValue omogoča stanju, da ohrani svojo prvotno vrednost, medtem ko je v prehodu.

Komponenta SearchPage s kavljem useDeferredValue().

uvoz { useState, useTransition, useDeferredValue } od "reagirati";
funkcijoSearchPage() {


konst [,startTransition] = useTransition();
 const [input, setInput] = useState("")
konst [seznam, setList] = useState([]);


konst velikost seznama = 30000


funkcijohandleChange(e) {
setInput(e.cilj.vrednost);
 startTransition(() => {
konst predmeti seznama = [];


za (pustiti i = 0; i < listSize; i++){
listItems.potisnite(e.cilj.vrednost);
 }


setList (listItems);
 });
 }
konst deferredValue = useDeferredValue (vhod);
vrnitev (
<razdel>
<etiketo>Išči po spletu: </label>
<vrsta vnosa="besedilo" value={input} onChange={handleChange} />


{seznam.map((predmet, indeks) => {
 vrnitev <div ključ={index} input={deferredValue} >{item}</div>
 })}
</div>
 );
}
izvozprivzeto SearchPage;

V zgornji kodi boste videli, da je čaka () funkcija ne obstaja več. To je zato, ker deferredValue spremenljivka iz kavelj useDeferredValue nadomesti čaka () funkcijo med prehodom stanja. Namesto, da se seznam rezultatov iskanja osveži, ko vnesete nov znak, bo ohranil svoje stare vrednosti, dokler aplikacija ne posodobi stanja.

React useSyncExternalStore Hook

Za razliko od kavljev useTransition in useDeferredValue, ki delujejo s kodo aplikacije, useSyncExternalStore deluje s knjižnicami. Vaši aplikaciji React omogoča naročanje in branje podatkov iz zunanjih knjižnic. Kavelj useSyncExternalStore uporablja naslednjo izjavo:

konst stanje = useSyncExternalStore (naročite se, getSnapshot[, getServerSnapshot]);

Ta podpis vsebuje naslednje:

  • država: vrednost shrambe podatkov, ki jo vrne kavelj useSyncExternalStore.
  • naročite se: registrira povratni klic, ko se spremeni shramba podatkov.
  • getSnapshot: vrne trenutno vrednost shrambe podatkov.
  • getServerSnapshot: vrne posnetek, uporabljen med upodabljanjem strežnika.

Z useSyncExternalStore se lahko naročite na celotno shrambo podatkov ali na določeno polje znotraj shrambe podatkov.

React useInsertionEffect Hook

Kavelj useInsertionEffect je še en nov kavelj React, ki deluje s knjižnicami. Vendar namesto shramba podatkov kavelj useInsertionEffect deluje s knjižnicami CSS-in-JS. Ta kavelj obravnava težave z zmogljivostjo upodabljanja sloga. Slogira DOM, preden prebere postavitev v kavlju useLayoutEffect.

Reagirajte useId Hook

Kavelj useId uporabljate v situacijah, ki zahtevajo edinstvene ID-je (razen ključev na seznamu). Njegov glavni namen je ustvariti ID-je, ki ostanejo edinstveni za odjemalca in strežnika, s čimer se izognemo napaki neusklajenosti hidracije strežnika React. Kavelj useId uporablja naslednjo izjavo:

konst id = useId()

V izjavi id je edinstven niz, ki vključuje : žeton. Po prijavi lahko prenesete id spremenljivka neposredno na element(e), ki jo potrebujejo.

Kakšno vrednost dodajajo te nove kljuke odzivu?

Kavlji useTransition in useDeferredValue so kavlji za kodo aplikacije. S sočasnim upodabljanjem izboljšajo delovanje aplikacij. Kavelj useId se spopade z napako neusklajenosti hidracije z ustvarjanjem edinstvenih ID-jev v odjemalcu in strežniku.

Kavlja useSyncExternalStore in useInsertionEffect delujeta z zunanjimi knjižnicami, da olajšata sočasno upodabljanje. Kavelj useInsertionEffect deluje s knjižnicami CSS-in-JS. Kavelj useSyncExternalStore deluje s knjižnicami za shranjevanje podatkov, kot je trgovina Redux.

Ti kavlji skupaj močno povečajo zmogljivost, kar posledično izboljša uporabniško izkušnjo.