2022 m. kovo mėn. „React“ komanda paskelbė oficialų „React 18“ išleidimą. Šis leidimas buvo su daugybe naujų funkcijų, skirtų našumui gerinti, remiantis „lygiagrečio atvaizdavimo“ koncepcija. Lygiagrečio atvaizdavimo idėja yra padaryti, kad atvaizdavimo DOM procesas būtų pertraukiamas.
Tarp naujų funkcijų yra penki kabliukai: useId, useTransition, useDerredValue, useSyncExternalStore ir useInsertionEffect.
Reaguoti useTransition Hook
Pagal numatytuosius nustatymus visi „React“ būsenos atnaujinimai yra skubūs. Skirtingi jūsų programos būsenos naujiniai konkuruoja dėl tų pačių išteklių, todėl tai sulėtina. UseTransition Reagavimo kabliukas išsprendžia šią problemą leisdamas pažymėti kai kuriuos būsenos atnaujinimus kaip neskubus. Tai leidžia skubiems būsenos atnaujinimams nutraukti tuos, kurių prioritetas yra žemesnis.
Paieškos puslapio komponentas
Ši paprasta programa imituoja paieškos variklį, kuris atnaujina dvi būsenas – įvesties lauką ir kai kuriuos paieškos rezultatus.
importuoti { useState } iš „reaguoti“;
funkcijaPaieškos puslapis() {
const [input, setInput] = useState("")
konst [sąrašą, setList] = useState([]);konst sąrašo dydis = 30000
funkcijarankenaKeisti(e) {
setInput(e.taikinys.vertė);
konst listItems = [];dėl (leisti aš = 0; i < listDydis; i++){
elementų sąrašas.stumti(e.taikinys.vertė);
}setList (listItems);
}grąžinti (
<div>
<etiketė>Ieškoti internete: </label>
<įvesties tipas ="tekstą" value={input} onChange={handleChange} />
{sąrašą.map((elementas, indeksas) => {
grąžinti <div raktas={index}>{item}</div>
})}
</div>
);
}
eksportuotinumatytas Paieškos puslapis;
Atnaujintas programos komponentas
importuoti Paieškos puslapis iš "./Components/SearchPage";funkcijaProgramėlė() {
grąžinti (
<div>
< Paieškos puslapis/>
</div>
);
}
eksportuotinumatytas Programėlė;
Aukščiau pateiktas kodas pateikia „React“ programą su įvesties lauku:
Kai pradėsite vesti simbolius į lauką, žemiau bus rodoma 30 000 įvesto teksto kopijų:
Jei greitai įvesite kelis simbolius iš eilės, turėtumėte pastebėti delsą. Tai turi įtakos laikui, per kurį simboliai pasirodo tiek įvesties lauke, tiek „paieškos rezultatų srityje“. Taip yra todėl, kad „React“ vienu metu vykdo abu būsenos naujinimus.
Jei demonstracinė versija vyksta per lėtai arba per greitai, pabandykite pakoreguoti sąrašo dydis atitinkamai vertę.
Įdėję „useTransition“ kabliuką į programą, galėsite teikti pirmenybę vienam būsenos atnaujinimui, o ne kitam.
„useTransition Hook“ naudojimas
importuoti {useState, useTransition} iš „reaguoti“;funkcijaPaieškos puslapis() {
konst [isPending, startTransition] = useTransition();
const [input, setInput] = useState("")
konst [sąrašą, setList] = useState([]);konst sąrašo dydis = 30000
funkcijarankenaKeisti(e) {
setInput(e.taikinys.vertė);
startTransition(() => {
konst listItems = [];dėl (leisti aš = 0; i < listDydis; i++){
elementų sąrašas.stumti(e.taikinys.vertė);
}setList (listItems);
});
}grąžinti (
<div>
<etiketė>Ieškoti internete: </label>
<įvesties tipas ="tekstą" value={input} onChange={handleChange} />{laukiama? "...Įkeliami rezultatai": list.map((elementas, indeksas) => {
grąžinti <div raktas={index}>{item}</div>
})}
</div>
);
}
eksportuotinumatytas Paieškos puslapis;
Atnaujinama jūsų Paieškos puslapis komponentas su aukščiau nurodytu kodu pirmenybę teiks įvesties laukui, o ne „paieškos rezultatų sričiai“. Šis paprastas pakeitimas turi aiškų poveikį: jūs turėtumėte nedelsdami matyti tekstą, kurį įvedate į įvesties lauką. Tik „paieškos rezultatų sritis“ vis tiek turės nedidelį delsą. Taip yra dėl pradėtiPerėjimastaikomųjų programų sąsaja (API) iš naudojimoTransition kabliuko.
Kodas, kuris pateikia paieškos rezultatus vartotojo sąsajai, dabar naudoja pradėtiPerėjimas API. Tai leidžia įvesties laukui nutraukti paieškos rezultatų būsenos atnaujinimą. Kai laukiama () funkcija rodo "...Įkeliamas rezultatas", tai rodo, kad vyksta perėjimas (iš vienos būsenos į kitą).
Reaguoti useDeferredValue Hook
Kabliukas useDeferredValue leidžia atidėti nereikalingo būsenos atnaujinimo pakartotinį pateikimą. Kaip ir „useTransition“ kabliukas, „useDeferredValue“ kabliukas yra lygiagretumo kabliukas. Kabliukas useDeferredValue leidžia būsenai išlaikyti pradinę vertę, kol ji pereina.
Paieškos puslapio komponentas su useDeferredValue() Hook
importuoti { useState, useTransition, useDeferredValue } iš „reaguoti“;funkcijaPaieškos puslapis() {
konst [,startTransition] = useTransition();
const [input, setInput] = useState("")
konst [sąrašą, setList] = useState([]);konst sąrašo dydis = 30000
funkcijarankenaKeisti(e) {
setInput(e.taikinys.vertė);
startTransition(() => {
konst listItems = [];dėl (leisti aš = 0; i < listDydis; i++){
elementų sąrašas.stumti(e.taikinys.vertė);
}setList (listItems);
});
}
konst deferredValue = useDeferredValue (įvestis);
grąžinti (
<div>
<etiketė>Ieškoti internete: </label>
<įvesties tipas ="tekstą" value={input} onChange={handleChange} />{sąrašą.map((elementas, indeksas) => {
grąžinti <div raktas={index} input={deferredValue} >{item}</div>
})}
</div>
);
}
eksportuotinumatytas Paieškos puslapis;
Aukščiau pateiktame kode pamatysite, kad laukiama () funkcija nebeegzistuoja. Taip yra dėl to, deferredValue kintamasis iš kabliuko useDeferredValue pakeičia laukiama () funkcija būsenos perėjimo metu. Užuot atnaujinęs paieškos rezultatų sąrašą, kai įvesite naują simbolį, jis išsaugos senąsias vertes, kol programa neatnaujins būsenos.
Reaguokite useSyncExternalStore Hook
Skirtingai nuo „useTransition“ ir „useDeferredValue“ kabliukų, kurie veikia su programos kodu, „useSyncExternalStore“ veikia su bibliotekomis. Tai leidžia jūsų React programai prenumeruoti ir skaityti duomenis iš išorinių bibliotekų. Kabliukas useSyncExternalStore naudoja šią deklaraciją:
konst būsena = useSyncExternalStore (prenumeruoti, getSnapshot[, getServerSnapshot]);Šiame paraše yra:
- valstybė: duomenų saugyklos, kurią grąžina kabliukas useSyncExternalStore, reikšmė.
- Prenumeruoti: registruoja atgalinį skambutį, kai pasikeičia duomenų saugykla.
- gauti momentinį vaizdą: grąžina dabartinę duomenų saugyklos reikšmę.
- gautiServerSnapshot: grąžina momentinę nuotrauką, naudotą serverio atvaizdavimo metu.
Naudodami useSyncExternalStore galite užsiprenumeruoti visą duomenų saugyklą arba konkretų lauką duomenų saugykloje.
Reaguoti useInsertionEffect Hook
„useInsertionEffect Hook“ yra dar vienas naujas „React Hook“, kuris veikia su bibliotekomis. Tačiau vietoj duomenų saugyklų „useInsertionEffect Hook“ veikia su CSS-in-JS bibliotekomis. Šis kabliukas sprendžia stiliaus atvaizdavimo našumo problemas. Jis sukuria DOM stilių prieš nuskaitydamas maketą „useLayoutEffect“ kabliu.
Reaguoti useId Hook
Kabliuką useId naudojate tais atvejais, kai reikia unikalių ID (išskyrus raktus sąraše). Pagrindinis jo tikslas yra generuoti ID, kurie lieka unikalūs kliento ir serverio atžvilgiu, išvengiant „React“ serverio hidratacijos neatitikimo klaidos. „useId“ kabliukas naudoja šią deklaraciją:
konst id = useId()Deklaracijoje id yra unikali eilutė, kuri apima : ženklas. Po deklaravimo galite perduoti id kintamąjį tiesiai į elementą (-ius), kuriems to reikia.
Kokią vertę šie nauji kabliukai prideda reaguojant?
Kabliukai useTransition ir useDeferredValue yra programos kodo kabliukai. Naudodami lygiagrečio atvaizdavimo funkciją, jie pagerina programų našumą. „useId“ kabliukas pašalina hidratacijos neatitikimo klaidą sukurdamas unikalius ID klientui ir serveryje.
Kabliukai useSyncExternalStore ir useInsertionEffect veikia su išorinėmis bibliotekomis, kad palengvintų vienalaikį atvaizdavimą. Kabliukas useInsertionEffect veikia su CSS-in-JS bibliotekomis. „useSyncExternalStore“ kabliukas veikia su duomenų saugyklų bibliotekomis, tokiomis kaip „Redux store“.
Kartu šie kabliukai labai padidina našumą, o tai savo ruožtu pagerina vartotojo patirtį.
