U ožujku 2022. React tim je najavio službeno izdanje Reacta 18. Ovo izdanje dolazi s nizom novih značajki usmjerenih na poboljšanje performansi, na temelju koncepta "istodobnog renderiranja". Ideja koja stoji iza istodobnog renderiranja je da se proces renderiranja u DOM učini prekinutim.
Među novim značajkama je pet kukica: useId, useTransition, useDerredValue, useSyncExternalStore i useInsertionEffect.
Reagirajte korištenjem Transition Hook
Prema zadanim postavkama, sva ažuriranja stanja Reacta su hitna. Različita ažuriranja stanja u vašoj aplikaciji natječu se za iste resurse, usporavajući je. UseTranzition Reakcija kuka rješava ovaj problem dopuštajući vam da označite neka ažuriranja stanja kao nehitna. To omogućuje hitnim ažuriranjima stanja da prekinu one s nižim prioritetom.
Komponenta SearchPage
Ovaj jednostavan program imitira tražilicu koja ažurira dva stanja – polje za unos i neke rezultate pretraživanja.
uvoz { useState } iz "reagirati";
funkcijaSearchPage() {
const [input, setInput] = useState( "")
konst [popis, setList] = useState([]);konst listSize = 30000
funkcijahandleChange(e) {
setInput(e.cilj.vrijednost);
konst stavke popisa = [];za (neka i = 0; i < listSize; i++){
listItems.gurnuti(e.cilj.vrijednost);
}setList (listItems);
}povratak (
<razd>
<označiti>Pretraži internet: </label>
<vrsta unosa="tekst" value={input} onChange={handleChange} />
{popis.map((stavka, indeks) => {
povratak <div ključ={index}>{artikal}</div>
})}
</div>
);
}
izvozzadano SearchPage;
Ažurirana komponenta aplikacije
uvoz SearchPage iz "./Components/SearchPage";funkcijaApp() {
povratak (
<razd>
< SearchPage/>
</div>
);
}
izvozzadano Aplikacija;
Gornji kod prikazuje React aplikaciju s poljem za unos:
Kada počnete upisivati znakove u polje, ispod će se pojaviti 30.000 kopija upisanog teksta:
Ako brzo upisujete nekoliko znakova, trebali biste uočiti kašnjenje. Utječe na vrijeme koje je potrebno znakovima da se pojave i u polju za unos i u "području rezultata pretraživanja". To je zato što React istovremeno pokreće oba ažuriranja stanja.
Ako demo radi presporo ili prebrzo za vas, pokušajte podesiti listSize vrijednost sukladno tome.
Umetanje kuke useTransition u aplikaciju omogućit će vam da date prioritet jednom ažuriranju stanja nad drugim.
Korištenje useTransition Hook
uvoz {useState, useTransition} iz "reagirati";funkcijaSearchPage() {
konst [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
konst [popis, setList] = useState([]);konst listSize = 30000
funkcijahandleChange(e) {
setInput(e.cilj.vrijednost);
startTransition(() => {
konst stavke popisa = [];za (neka i = 0; i < listSize; i++){
listItems.gurnuti(e.cilj.vrijednost);
}setList (listItems);
});
}povratak (
<razd>
<označiti>Pretraži internet: </label>
<vrsta unosa="tekst" value={input} onChange={handleChange} />{isPending? "...Učitavanje rezultata": list.map((stavka, indeks) => {
povratak <div ključ={index}>{artikal}</div>
})}
</div>
);
}
izvozzadano SearchPage;
Ažuriranje vašeg SearchPage komponenta s gornjim kodom dat će prednost polju za unos u odnosu na "područje rezultata pretraživanja". Ova jednostavna promjena ima jasan učinak: trebali biste odmah početi vidjeti tekst koji upisujete u polje za unos. Samo će "područje rezultata pretraživanja" i dalje imati malo kašnjenje. To je zbog startTransitionsučelje za programiranje aplikacije (API) s kuke useTransition.
Kôd koji prikazuje rezultate pretraživanja korisničkom sučelju sada koristi startTransition API. To omogućuje polju za unos da prekine ažuriranje stanja rezultata pretraživanja. Kada je na čekanju() funkcija prikazuje “...Rezultat učitavanja” to označava da se događa prijelaz (iz jednog stanja u drugo).
Reagirajte useDeferredValue Hook
UseDeferredValue kuka vam omogućuje odgađanje ponovnog prikazivanja ažuriranja stanja bez hitnog poziva. Poput kuke useTransition, kuka useDeferredValue je kuka za istodobnost. UseDeferredValue kuka omogućuje stanju da zadrži svoju izvornu vrijednost dok je u prijelazu.
Komponenta SearchPage s kukom useDeferredValue().
uvoz { useState, useTransition, useDeferredValue } iz "reagirati";funkcijaSearchPage() {
konst [,startTransition] = useTransition();
const [input, setInput] = useState("")
konst [popis, setList] = useState([]);konst listSize = 30000
funkcijahandleChange(e) {
setInput(e.cilj.vrijednost);
startTransition(() => {
konst stavke popisa = [];za (neka i = 0; i < listSize; i++){
listItems.gurnuti(e.cilj.vrijednost);
}setList (listItems);
});
}
konst deferredValue = useDeferredValue (ulaz);
povratak (
<razd>
<označiti>Pretraži internet: </label>
<vrsta unosa="tekst" value={input} onChange={handleChange} />{popis.map((stavka, indeks) => {
povratak <div ključ={index} input={deferredValue} >{artikal}</div>
})}
</div>
);
}
izvozzadano SearchPage;
U gornjem kodu vidjet ćete da je na čekanju() funkcija više ne postoji. To je zato što deferredValue varijabla iz kukice useDeferredValue zamjenjuje je na čekanju() funkcija tijekom prijelaza stanja. Umjesto da se popis rezultata pretraživanja osvježava kada upišete novi znak, on će zadržati svoje stare vrijednosti dok aplikacija ne ažurira stanje.
Reagirajte useSyncExternalStore Hook
Za razliku od kukica useTransition i useDeferredValue koje rade s kodom aplikacije, useSyncExternalStore radi s knjižnicama. Omogućuje vašoj React aplikaciji da se pretplati i čita podatke iz vanjskih biblioteka. UseSyncExternalStore kuka koristi sljedeću deklaraciju:
konst stanje = useSyncExternalStore (pretplati se, getSnapshot[, getServerSnapshot]);Ovaj potpis sadrži sljedeće:
- država: vrijednost pohrane podataka koju vraća kuka useSyncExternalStore.
- pretplatiti se: registrira povratni poziv kada se promijeni pohrana podataka.
- getSnapshot: vraća trenutnu vrijednost pohrane podataka.
- getServerSnapshot: vraća snimku korištenu tijekom prikazivanja poslužitelja.
Uz useSyncExternalStore, možete se pretplatiti na cijelu pohranu podataka ili na određeno polje unutar spremišta podataka.
Reakcija useInsertionEffect Hook
UseInsertionEffect kuka je još jedna nova React kuka koja radi s knjižnicama. Međutim, umjesto spremišta podataka, useInsertionEffect kuka radi s CSS-in-JS bibliotekama. Ova kuka rješava probleme izvedbe renderiranja stila. Stilizira DOM prije čitanja izgleda u kukici useLayoutEffect.
Reagirajte useId Hook
Zakačicu useId koristite u situacijama koje zahtijevaju jedinstvene ID-ove (osim ključeva na popisu). Njegova glavna svrha je generiranje ID-ova koji ostaju jedinstveni za klijenta i poslužitelja, izbjegavajući pogrešku neusklađenosti hidratacije React poslužitelja. UseId kuka koristi sljedeću deklaraciju:
konst id = useId()U deklaraciji iskaznica je jedinstveni niz koji uključuje : token. Nakon deklaracije, možete položiti iskaznica varijabla izravno na element(e) kojima je to potrebno.
Koju vrijednost ove nove kuke dodaju reakciji?
Zadice useTransition i useDeferredValue su kuke za programski kod. Kroz istodobno renderiranje poboljšavaju performanse aplikacija. UseId kuka rješava pogrešku neusklađenosti hidratacije stvaranjem jedinstvenih ID-ova na klijentu i poslužitelju.
Zadice useSyncExternalStore i useInsertionEffect rade s vanjskim bibliotekama kako bi se olakšalo istovremeno prikazivanje. UseInsertionEffect kuka radi s CSS-in-JS bibliotekama. UseSyncExternalStore kuka radi s knjižnicama pohrane podataka kao što je Redux store.
Zajedno ove kuke daju veliki poticaj performansama, što zauzvrat poboljšava korisničko iskustvo.
