Õppige kasutama React 18 konkse

2022. aasta märtsis teatas Reacti meeskond React 18 ametlikust väljalasest. Selle versiooniga oli kaasas hulk uusi funktsioone, mis on suunatud jõudluse parandamisele, mis põhinevad samaaegse renderdamise kontseptsioonil. Samaaegse renderdamise idee on muuta DOM-i renderdamisprotsess katkestatavaks.

Uute funktsioonide hulgas on viis konksu: useId, useTransition, useDerredValue, useSyncExternalStore ja useInsertionEffect.

Reageerige useTransition Hook

Vaikimisi on kõik Reacti oleku värskendused kiireloomulised. Teie rakenduse erinevad olekuvärskendused konkureerivad samade ressursside pärast, aeglustades seda. UseTransition Reageerimiskonks lahendab selle probleemi, lubades teil märkida mõned olekuvärskendused mittekiireloomuliseks. See võimaldab kiireloomulistel olekuvärskendustel katkestada madalama prioriteediga olekuvärskendused.

Otsingulehe komponent

See lihtne programm jäljendab otsingumootorit, mis värskendab kahte olekut – sisestusvälja ja mõningaid otsingutulemusi.

importida { useState } 





instagram viewer

alates "reageerida";
funktsiooniOtsinguleht() {
 const [sisend, setInput] = useState("")
konst [nimekirja, setList] = useState([]);
konst loendi suurus = 30000
funktsioonikäepideMuuda(e) {
setInput(e.sihtmärk.väärtus);
konst listItems = [];
jaoks (lase i = 0; i < listSize; i++){
esemete loend.push(e.sihtmärk.väärtus);
 }
setList (listItems);
 }
tagasi (
<div>
<silt>Otsi veebist: </label>
<sisendi tüüp="tekst" value={input} onChange={handleChange} />
{nimekirja.map((üksus, register) => {
 tagasi <div võti={index}>{item}</div>
 })}
</div>
 );
}
eksportidavaikimisi Otsinguleht;

Värskendatud rakenduse komponent

importida Otsinguleht alates "./Components/SearchPage";
funktsiooniRakendus() {
tagasi (
<div>
< Otsinguleht/>
</div>
 );
}
eksportidavaikimisi Rakendus;

Ülaltoodud kood renderdab Reacti rakenduse sisestusväljaga:

Kui hakkate väljale märke sisestama, kuvatakse allpool 30 000 trükitud teksti koopiat:

Kui sisestate mitu tähemärki kiiresti järjest, peaksite märkama viivitust. See mõjutab aega, mis kulub märkide ilmumiseks nii sisestusväljale kui ka otsingutulemuste alale. Selle põhjuseks on asjaolu, et React käitab mõlemat olekuvärskendust korraga.

Kui demo töötab teie jaoks liiga aeglaselt või liiga kiiresti, proovige seda muuta loendi suurus väärtustada vastavalt.

Kui sisestate rakendusse konksu useTransition, saate ühe olekuvärskenduse eelistada teisele.

UseTransition Hooki kasutamine

importida {useState, useTransition} alates "reageerida";
funktsiooniOtsinguleht() {
konst [isPending, startTransition] = useTransition();
 const [sisend, setInput] = useState("")
konst [nimekirja, setList] = useState([]);
konst loendi suurus = 30000
funktsioonikäepideMuuda(e) {
setInput(e.sihtmärk.väärtus);
 startTransition(() => {
konst listItems = [];
jaoks (lase i = 0; i < listSize; i++){
esemete loend.push(e.sihtmärk.väärtus);
 }
setList (listItems);
 });
 }
tagasi (
<div>
<silt>Otsi veebist: </label>
<sisendi tüüp="tekst" value={input} onChange={handleChange} />
{on Ootel? "...Tulemuste laadimine": list.map((üksus, register) => {
 tagasi <div võti={index}>{item}</div>
 })}
</div>
 );
}
eksportidavaikimisi Otsinguleht;

Teie värskendamine Otsinguleht ülaltoodud koodiga komponent eelistab sisestusvälja otsingutulemuste alale. Sellel lihtsal muudatusel on selge mõju: peaksite kohe nägema sisestusväljale sisestatud teksti. Vaid „otsingutulemuste ala” on endiselt väikese viivitusega. See on tingitud startTransitionrakendusliides (API) UseTransition konksust.

Kood, mis renderdab otsingutulemused kasutajaliidesesse, kasutab nüüd koodi startTransition API. See võimaldab sisestusväljal katkestada otsingutulemuste oleku värskendamise. Kui on ootel () funktsioon kuvab "... Tulemuse laadimine", see näitab, et toimub üleminek (ühest olekust teise).

Reageerige useDeferredValue Hook

Konks useDeferredValue võimaldab teil mittesoovitava olekuvärskenduse uuesti renderdamist edasi lükata. Nagu useTransition konks, on ka useDeferredValue konks samaaegsuse konks. Konks useDeferredValue võimaldab olekul säilitada oma algset väärtust ülemineku ajal.

Otsingulehe komponent koos konksuga useDeferredValue()

importida { useState, useTransition, useDeferredValue } alates "reageerida";
funktsiooniOtsinguleht() {
konst [,startTransition] = useTransition();
 const [sisend, setInput] = useState("")
konst [nimekirja, setList] = useState([]);
konst loendi suurus = 30000
funktsioonikäepideMuuda(e) {
setInput(e.sihtmärk.väärtus);
 startTransition(() => {
konst listItems = [];
jaoks (lase i = 0; i < listSize; i++){
esemete loend.push(e.sihtmärk.väärtus);
 }
setList (listItems);
 });
 }
konst deferredValue = useDeferredValue (sisend);
tagasi (
<div>
<silt>Otsi veebist: </label>
<sisendi tüüp="tekst" value={input} onChange={handleChange} />
{nimekirja.map((üksus, register) => {
 tagasi <div võti={index} input={deferredValue} >{item}</div>
 })}
</div>
 );
}
eksportidavaikimisi Otsinguleht;

Ülaltoodud koodis näete, et on ootel () funktsiooni enam ei eksisteeri. Seda seetõttu, deferredValue konksu useDeferredValue muutuja asendab on ootel () funktsioon oleku ülemineku ajal. Selle asemel, et otsingutulemuste loend uue märgi sisestamisel värskendada, säilitab see vanad väärtused, kuni rakendus olekut värskendab.

Reageerige useSyncExternalStore Hook

Erinevalt konksudest useTransition ja useDeferredValue, mis töötavad rakenduse koodiga, töötab useSyncExternalStore teekidega. See võimaldab teie rakendusel React tellida väliste teekide andmeid ja lugeda neist andmeid. Konks useSyncExternalStore kasutab järgmist deklaratsiooni:

konst olek = useSyncExternalStore (telli, getSnapshot[, getServerSnapshot]);

See allkiri sisaldab järgmist:

• olek: andmesalve väärtus, mille konks useSyncExternalStore tagastab.
• tellida: registreerib tagasihelistamise, kui andmesalve muutub.
• saada Snapshot: tagastab andmesalve praeguse väärtuse.
• hankige ServerSnapshot: tagastab serveri renderdamisel kasutatud hetktõmmise.

Rakendusega useSyncExternalStore saate tellida terve andmesalve või andmesalves konkreetse välja.

Reage useInsertionEffect Hook

UseInsertionEffecti konks on veel üks uus Reacti konks, mis töötab teekide puhul. Kuid andmesalvede asemel töötab konks useInsertionEffect CSS-in-JS-i teekidega. See konks lahendab stiilide renderdamise jõudlusprobleemid. See stiilib DOM-i enne paigutuse lugemist konksus useLayoutEffect.

Reagee useId Hook

Kasutate konksu useId olukordades, mis nõuavad kordumatuid ID-sid (välja arvatud loendis olevad võtmed). Selle põhieesmärk on luua ID-sid, mis jäävad kliendi ja serveri vahel ainulaadseks, vältides Reacti serveri hüdratsiooni mittevastavuse viga. Konks useId kasutab järgmist deklaratsiooni:

konst id = useId()

Deklaratsioonis id on ainulaadne string, mis sisaldab : märk. Pärast deklareerimist saate läbida id muutuja otse seda vajavale elemendile (elementidele).

Millist väärtust need uued konksud reageerimiseks lisavad?

Konksud useTransition ja useDeferredValue on rakenduse koodikonksud. Samaaegsuse renderdamise kaudu parandavad need rakenduste jõudlust. UseId konks lahendab hüdratsiooni mittevastavuse vea, luues kliendi ja serveri vahel ainulaadsed ID-d.

Konksud useSyncExternalStore ja useInsertionEffect töötavad samaaegsuse renderdamise hõlbustamiseks väliste raamatukogudega. Konks useInsertionEffect töötab CSS-in-JS-i teekidega. Konks useSyncExternalStore töötab andmesalve raamatukogudega, nagu Reduxi pood.

Need konksud koos annavad jõudlusele olulise tõuke, mis omakorda parandab kasutajakogemust.