Vormi jõudluse optimeerimine useRef ja useCallback Hooksi abil

Reactist on saanud üks populaarsemaid kasutajaliideste loomise raamistikke. Paljud esiotsa arendajad eelistavad JavaScripti teeki selle tõhususe, mitmekülgsuse ja mastaapsuse tõttu. Veebivorm võib siiski põhjustada jõudlusprobleeme, kui te seda õigesti ei optimeeri.

Reactil on konksud useRef ja useCallback, mis aitavad vähendada tarbetuid värskendusi ja uuesti renderdamist.

Uurige nende konksude kõige tõhusamaid rakendusi ja kiirendage oma Reacti vorme.

UseRef ja useCallback Hooks mõistmine

Kaks Reacti kõige tõhusamat jõudlust suurendavat funktsiooni on useRef ja useCallback konksud.

The useRef hook genereerib muutuva viite, mis võib püsida paljude komponentide renderdustes. Selle levinumad kasutusalad hõlmavad juurdepääsu DOM-i elementidele, oleku salvestamist, mis ei käivita uuesti renderdamist, ja kallite arvutuste vahemällu salvestamist.

Saate kasutada mälu säästvat funktsiooni,

kasutage tagasihelistamist, konksuna alamkomponentidest sõltuvate komponentide funktsionaalsuse parandamiseks. Tavaliselt kasutate seda meetodit sündmuste käitlejate ja muude rutiinide jaoks, mis edastatakse rekvisiidina.

Reacti tavalised vormi jõudlusega seotud probleemid

Vormid rakenduses React võib esineda probleeme jõudlusega, kuna kasutaja sisestab palju ja muudatusi nad saavad. Aeglased reageerimisajad, tarbetud uuesti renderdamised ja halb olekuhaldus on sagedased probleemid.

Need probleemid on tavaliselt põhjustatud järgmistest põhjustest.

• Tarbetud kordusrenderdus: komponent võib rakendust aeglustada tarbetute kordusrenderdustega, mis on tingitud rekvisiitide või väljendite muudatustest, mis tulemust ei mõjuta.
• Kulud arvutused: komponent võib rakenduse jõudlust vähendada, kui see teeb iga renderduse jaoks kulukaid arvutusi.
• Ebatõhus olekuhaldus: komponendi ebatõhus olekuhaldus võib põhjustada mõttetuid värskendusi ja uuesti renderdamisi.

Kuidas kasutada vormi optimeerimiseks useRef ja useCallback Hooks

Uurime, kuidas kasutada vormide kiirendamiseks Reacti useRef ja useCallback konkse.

Vormielementidele juurdepääs rakendusega useRef

The useRef konks võimaldab juurdepääsu vormielementidele ilma uuesti renderdamiseta. See on eriti kasulik mitme komponendiga keerukate disainilahenduste puhul. Siin on näide:

importida Reageeri, { useRef } alates'reageeri';
funktsiooniVorm() {
konst inputRef = useRef(null);
funktsioonikäepide Esita(sündmus) {
sündmus.preventDefault();
konst inputValue = inputRef.current.value;
konsool.log (inputValue);
 }
tagasi (
<vormion Submit={handleSubmit}>
<sisendtüüp="tekst"viide={inputRef} />
<nupputüüp="Esita">Esitanuppu>
vormi>
 );
}

See näide viitab sisendkomponendile, kasutades konksu useRef. Sisendväärtusele pääsete juurde ilma, et peaksite pärast vormi esitamist uuesti renderdama.

Sündmuste töötlejate optimeerimine funktsiooni useCallback abil

The kasutage tagasihelistamist konks võimaldab meelde jätta sündmuste käitlejad ja muud funktsioonid et taandute rekvisiitidena lastekomponentidele. Seetõttu ei pruugi alamkomponentide uuesti renderdamine olla vajalik. Siin on näide:

importida Reageerida, { useCallback, useState } alates'reageeri';
funktsiooniVorm() {
konst [väärtus, setValue] = useState('');

konst handChange = useCallback((sündmus) => {
 setValue (event.target.value);
 }, []);
konst handleSubmit = useCallback((sündmus) => {
 event.preventDefault();
konsool.log (väärtus);
 }, [väärtus]);
tagasi (


"tekst" value={value} onChange={handleChange} />
"Esita">Esita</button>
 </form>
 );
}

Selles näites kasutatakse mällu salvestamiseks konksu useCallback käepideMuuda ja käepide Esita funktsioonid. See võib aidata vältida nupu ja teabekomponentide tarbetut uuesti renderdamist.

Vormi optimeerimine useRefi ja useCallback konksudega

Vaatame mõningaid tegelikke juhtumeid selle kohta, kuidas Reactis vorme kiirendada, kasutades konkse useRef ja useCallback.

Taganev sisend

Sisestuse tagasipöördumine on sagedane optimeerimistehnika vormi jõudluse parandamiseks. See tähendab funktsiooni kasutamise edasilükkamist, kuni selle käivitamisest on möödunud teatud aeg. Järgmises näites kasutatakse silumiseks konksu useCallback käepideMuuda meetod. See meetod võib parandada sisendelemendi kiirust ja aidata vältida tarbetuid värskendusi.

importida Reageerida, { useCallback, useState } alates'reageeri';
funktsiooniVorm() {
konst [väärtus, setValue] = useState('');
konst debouncedHandleChange = useCallback(
 debounce((väärtus) => {
konsool.log (väärtus);
 }, 500),
[]
 );
funktsioonikäepideMuuda(sündmus) {
setValue(sündmus.sihtmärk.väärtus);
debouncedHandleChange(sündmus.sihtmärk.väärtus);
 }
tagasi (
<vormi>
<sisendtüüp="tekst"väärtus={value}onChange={handleChange} />
vormi>
 );
}
funktsioonipõrgatama(fun, oota) {
lase aeg maha;
tagasifunktsiooni (...args) {
 clearTimeout (timeout);
 timeout = setTimeout(() => {
 func.apply(see, args);
 }, oota);
 };
}

See näide kasutab funktsiooni täitmise edasilükkamiseks debounce funktsiooni käepideMuuda meetod 500 millisekundi võrra. See võib parandada sisendelemendi kiirust ja aidata vältida tarbetuid värskendusi.

Laisk initsialiseerimine

Laisk lähtestamine on meetod kallite ressursside loomise edasilükkamiseks, kuni neid tõesti vaja läheb. Vormide kontekstis on abiks oleku lähtestamine, mida kasutatakse ainult vormi esitamisel.

Järgmine näide initsialiseerib laisalt formState objekti, kasutades konksu useRef. See võib parandada vormi jõudlust, lükates formState objekti loomise edasi seni, kuni see on tegelikult vajalik.

importida Reageerida, { useRef, useState } alates'reageeri';
funktsiooniVorm() {
konst [väärtus, setValue] = useState('');
konst formStateRef = useRef(null);
funktsioonikäepide Esita(sündmus) {
sündmus.preventDefault();
konst formState = formStateRef.current || {
 väli1: '',
 väli2: '',
 väli3: '',
 };
konsool.log (formState);
 }
funktsioonikäepideInputChange(sündmus) {
setValue(sündmus.sihtmärk.väärtus);
 }
tagasi (
<vormion Submit={handleSubmit}>
<sisendtüüp="tekst"väärtus={value}onChange={handleInputChange} />
<nupputüüp="Esita">Esitanuppu>
vormi>
 );
}

See näide kasutab konksu useRef, et vormistada objekti formState laisalt. See võib parandada vormi jõudlust, lükates formState objekti genereerimise edasi seni, kuni seda tegelikult vaja läheb.

UseRef ja useCallback konksude kasutamise parimad tavad

UseRefi ja useCallback konksude kasulikkuse maksimeerimiseks järgige järgmisi soovituslikke tavasid.

• DOM-i elementidele juurdepääsuks ja aeganõudvate arvutuste optimeerimiseks kasutage useRef.
• Optimeerige rekvisiidiga läbitud sündmuste käitlejaid ja muid meetodeid kasutades kasutage tagasihelistamist.
• Funktsioonide meeldejätmiseks ja alamkomponentide kahekordse renderdamise vältimiseks kasutage kasutage tagasihelistamist.
• Debounce abil saate parandada vormi jõudlust ja vältida tarbetuid värskendusi.
• Laske kallid ressursid oodata, kuni neid tegelikult vaja läheb, kasutades laisat lähtestamist.

Neid parimaid tavasid järgides saate luua kiireid ja tõhusaid komponente, mis pakuvad sujuvat kasutuskogemust ja parandavad teie Reacti rakenduste jõudlust.

Reactis vormi jõudluse optimeerimine

Konksud useRef ja useCallback on suurepärased tööriistad, mis aitavad vähendada tarbetuid kordusrenderdusi ja värskendusi, mis võivad parandada teie vormide toimivust.

Kui kasutate neid konkse õigesti ja järgite häid tavasid, nagu sisendi tagasilükkamine ja kulukate ressursside laisk lähtestamine, saate arendada vorme, mis on kiired ja tõhusad.