Kaip optimizuoti formos našumą reaguojant su useRef ir useCallback Hooks

„React“ tapo viena iš populiariausių vartotojo sąsajų kūrimo sistemų. Daugelis sąsajų kūrėjų pirmenybę teikia „JavaScript“ bibliotekai dėl jos efektyvumo, universalumo ir mastelio. Tačiau žiniatinklio forma vis tiek gali sukelti našumo problemų, jei jos netinkamai optimizuosite.

„React“ turi „useRef“ ir „useCallback“ kabliukus, kurie gali padėti sumažinti nereikalingų naujinimų ir pakartotinių pateikimų skaičių.

Ištirkite efektyviausias šių kabliukų pritaikymo galimybes ir pagreitinkite „React“ formas.

„useRef“ ir „useCallback Hooks“ supratimas

Dvi efektyviausios „React“ našumą gerinančios funkcijos yra „useRef“ ir „useCallback“ kabliukai.

The useRef Hook generuoja kintamą nuorodą, kuri gali išlikti daugelyje komponentų atvaizdų. Įprastas jo naudojimas apima prieigą prie DOM elementų, būsenos, kuri nesukelia pakartotinio pateikimo, išsaugojimą ir brangių skaičiavimų saugojimą talpykloje.

Galite naudoti atmintį taupančią funkciją, naudokite atgalinį skambutį, kaip kabliukas, skirtas pagerinti komponentų, kurie priklauso nuo vaikų komponentų, funkcionalumą. Šį metodą dažniausiai naudojate įvykių tvarkytojams ir kitoms rutinoms, kurios perduodamos kaip rekvizitas.

Įprastos „React“ formos našumo problemos

Formos React gali kilti problemų dėl našumo dėl daugybės naudotojų įvesties ir gaunamų pakeitimų. Lėtas atsako laikas, nereikalingas pakartotinis atvaizdavimas ir prastas būklės valdymas yra dažnos problemos.

Šios problemos paprastai kyla dėl šių priežasčių:

• Nereikalingi pakartotiniai atvaizdavimai: komponentas gali sulėtinti taikomąją programą dėl nereikalingo pakartotinio atvaizdavimo dėl rekvizitų ar išraiškų pakeitimų, kurie neturi įtakos rezultatui.
• Brangūs skaičiavimai: komponentas gali sumažinti programos našumą, jei jis atlieka brangius kiekvieno pateikimo skaičiavimus.
• Neefektyvus būsenos valdymas: neefektyvus komponento būsenos valdymas gali lemti beprasmiškus atnaujinimus ir pakartotinius pateikimus.

Kaip naudoti „useRef“ ir „useCallback Hooks“ formai optimizuoti

Panagrinėkime, kaip panaudoti „React“ „useRef“ ir „useCallback“ kabliukus, kad paspartintume formas.

Prieiga prie formos elementų naudojant „useRef

The useRef kabliukas leidžia pasiekti formos elementus be pakartotinio atvaizdavimo. Tai ypač naudinga sudėtingiems projektams su keliais komponentais. Štai pavyzdys:

importuoti Reaguoti, { useRef } iš'reaguoti';
funkcijaForma() {
konst inputRef = useRef(nulinis);
funkcijarankenaPateikti(įvykis) {
įvykis.preventDefault();
konst inputValue = inputRef.current.value;
konsolė.log (inputValue);
 }
grąžinti (
<formaonSubmit={handleSubmit}>
<įvestistipo="tekstas"ref={inputRef} />
<mygtukątipo="Pateikti">Pateiktimygtuką>
forma>
 );
}

Šiame pavyzdyje nurodomas įvesties komponentas naudojant „useRef“ kabliuką. Pateikę formą galite pasiekti įvesties vertę nereikės iš naujo pateikti.

Optimizuokite įvykių tvarkykles naudodami „useCallback“.

The naudokite atgalinį skambutį kabliukas leidžia įsiminti įvykių tvarkykles ir kitas funkcijas kad jūs perduodate vaikams komponentus kaip rekvizitus. Todėl gali nereikėti iš naujo pateikti antrinių komponentų. Štai pavyzdys:

importuoti Reaguoti, { useCallback, useState } iš'reaguoti';
funkcijaForma() {
konst [value, setValue] = useState('');

konst handChange = useCallback((įvykis) => {
 setValue (event.target.value);
 }, []);
konst handleSubmit = useCallback((įvykis) => {
 event.preventDefault();
konsolė.log (reikšmė);
 }, [reikšmė]);
grąžinti (


"tekstas" value={value} onChange={handleChange} />
"Pateikti">Pateikti</button>
 </form>
 );
}

Šiame pavyzdyje naudojamas „useCallback“ kabliukas, kad įsimintų rankenaKeisti ir rankenaPateikti funkcijas. Tai gali padėti išvengti nereikalingo mygtuko ir informacijos komponentų pakartotinio pateikimo.

Formos optimizavimas naudojant „useRef“ ir „useCallback Hooks“.

Pažvelkime į keletą faktinių pavyzdžių, kaip paspartinti formas React naudojant „useRef“ ir „useCallback“ kabliukus.

Debouncing įvestis

Atšaukimo įvestis yra dažnas optimizavimo būdas, skirtas pagerinti formos našumą. Tai reiškia, kad funkcijos naudojimas atidedamas, kol praeis tam tikras laikas nuo jos iškvietimo. Šiame pavyzdyje naudojamas „useCallback“ kabliukas, kad derintų rankenaKeisti metodas. Šis metodas gali pagerinti įvesties elemento greitį ir padėti išvengti nereikalingų naujinimų.

importuoti Reaguoti, { useCallback, useState } iš'reaguoti';
funkcijaForma() {
konst [value, setValue] = useState('');
konst debouncedHandleChange = useCallback(
 debounce ((vertė) => {
konsolė.log (reikšmė);
 }, 500),
[]
 );
funkcijarankenaKeisti(įvykis) {
setValue(įvykis.taikinys.vertė);
debouncedHandleChange(įvykis.taikinys.vertė);
 }
grąžinti (
<forma>
<įvestistipo="tekstas"vertė={value}onChange={handleChange} />
forma>
 );
}
funkcijaatšokti(veikia, palauk) {
leisti laikas baigėsi;
grąžintifunkcija (...args) {
 clearTimeout (timeout);
 timeout = setTimeout(() => {
 func.apply(tai, args);
 }, laukti);
 };
}

Šiame pavyzdyje naudojama debounce funkcija, kad atidėtų vykdymą rankenaKeisti metodu 500 milisekundžių. Tai gali pagerinti įvesties elemento greitį ir padėti išvengti nereikalingų naujinimų.

Tingus inicijavimas

Tingus inicijavimas yra būdas atidėti brangių išteklių kūrimą, kol jų tikrai prireiks. Kalbant apie formas, naudinga inicijuoti būseną, kuri naudojama tik tada, kai forma pateikiama.

Šis pavyzdys tingiai inicijuoja formaBūsena objektą naudodami useRef kabliuką. Tai gali pagerinti formos našumą atidedant formState objekto kūrimą, kol to iš tikrųjų reikės.

importuoti Reaguoti, { useRef, useState } iš'reaguoti';
funkcijaForma() {
konst [value, setValue] = useState('');
konst formStateRef = useRef(nulinis);
funkcijarankenaPateikti(įvykis) {
įvykis.preventDefault();
konst formState = formStateRef.current || {
 1 laukas: '',
 2 laukas: '',
 3 laukas: '',
 };
konsolė.log (formState);
 }
funkcijarankenaInputChange(įvykis) {
setValue(įvykis.taikinys.vertė);
 }
grąžinti (
<formaonSubmit={handleSubmit}>
<įvestistipo="tekstas"vertė={value}onChange={handleInputChange} />
<mygtukątipo="Pateikti">Pateiktimygtuką>
forma>
 );
}

Šiame pavyzdyje naudojamas kabliukas useRef, kad būtų galima tingiai inicijuoti objektą formState. Tai gali pagerinti formos našumą atidedant formState objekto generavimą, kol jo iš tikrųjų prireiks.

Geriausia „useRef“ ir „useCallback Hooks“ naudojimo praktika

Norėdami maksimaliai išnaudoti „useRef“ ir „useCallback“ kabliukų naudą, laikykitės šių rekomenduojamų praktikų:

• Norėdami pasiekti DOM elementus ir optimizuoti daug laiko reikalaujančius skaičiavimus, naudokite useRef.
• Optimizuokite perduotų įvykių tvarkykles ir kitus metodus naudodami naudokite atgalinį skambutį.
• Norėdami atsiminti funkcijas ir išvengti antrinių komponentų atvaizdavimo du kartus, naudokite naudokite atgalinį skambutį.
• Naudodami debounce galite pagerinti formos našumą ir išvengti nereikalingų naujinimų.
• Priverskite brangius išteklius laukti, kol jų iš tikrųjų prireiks, naudodami tingų inicijavimą.

Vadovaudamiesi šiais geriausios praktikos pavyzdžiais galite sukurti greitus, efektyvius komponentus, kurie užtikrina sklandų naudotojo patirtį ir pagerina „React“ programų našumą.

Optimizuokite „React“ formos našumą

„useRef“ ir „useCallback“ kabliukai yra puikūs įrankiai, kurie gali padėti sumažinti nereikalingų pakartotinių atvaizdų ir naujinimų skaičių, o tai gali pagerinti jūsų formų našumą.

Tinkamai išnaudodami šiuos kabliukus ir vadovaudamiesi geriausios praktikos pavyzdžiais, pvz., įvesties atšaukimu ir tingiu brangių išteklių inicijavimu, galite sukurti greitas ir efektyvias formas.