Kako optimizirati izvedbu obrasca u Reactu s kukicama useRef i useCallback

React je postao jedan od najpopularnijih okvira za kreiranje korisničkih sučelja. Mnogi front-end programeri favoriziraju JavaScript biblioteku zbog njene učinkovitosti, svestranosti i skalabilnosti. No web-obrazac i dalje može uzrokovati probleme s izvedbom ako ga ispravno ne optimizirate.

React ima useRef i useCallback kuke, koje mogu pomoći smanjenjem nepotrebnih ažuriranja i ponovnih renderiranja.

Istražite najučinkovitije primjene ovih kuka i ubrzajte svoje React forme.

Razumijevanje useRef i useCallback kuka

Dvije Reactove najučinkovitije značajke za poboljšanje performansi su useRef i useCallback kuke.

The upotrebaRef hook generira promjenjivu referencu koja može postojati u brojnim prikazima komponenti. Uobičajene upotrebe za to uključuju pristup DOM elementima, pohranjivanje stanja koje ne pokreće ponovno renderiranje i predmemoriranje skupih izračuna.

Možete koristiti funkciju učinkovite memorije,

useCallback, kao spojnica za poboljšanje funkcionalnosti komponenti koje ovise o podređenim komponentama. Ovu metodu obično koristite za rukovatelje događajima i druge rutine koje se prenose kao rekvizite.

Uobičajeni problemi s izvedbom obrazaca u Reactu

Forme u Reactu mogu imati problema s izvedbom zbog velike količine unosa korisnika i promjena koje dobiju. Sporo vrijeme odziva, nepotrebno ponovno renderiranje i loše upravljanje stanjem česti su problemi.

Te probleme obično uzrokuje sljedeće:

• Nepotrebni ponovni prikazi: Komponenta može usporiti aplikaciju nepotrebnim ponovnim prikazima zbog promjena u elementima ili izrazima koji nemaju utjecaja na ishod.
• Skupi izračuni: komponenta može smanjiti izvedbu aplikacije ako izvodi skupe izračune za svako iscrtavanje.
• Neučinkovito upravljanje stanjem: Neučinkovito upravljanje stanjem od strane komponente može dovesti do besmislenih ažuriranja i ponovnog renderiranja.

Kako koristiti useRef i useCallback kuke za optimizaciju obrazaca

Ispitajmo kako iskoristiti Reactove useRef i useCallback kuke za ubrzanje naših obrazaca.

Pristup elementima obrasca s korištenjem Ref

The upotrebaRef hook omogućuje pristup elementima obrasca bez rezultiranja ponovnim prikazom. Ovo je osobito korisno za složene dizajne s nekoliko komponenti. Evo primjera:

uvoz Reagiraj, {useRef} iz'reagirati';
funkcijaOblik() {
konst inputRef = useRef(ništavan);
funkcijarukovanjePošalji(događaj) {
događaj.preventDefault();
konst inputValue = inputRef.current.value;
konzola.log (ulaznaVrijednost);
 }
povratak (
<oblikonSubmit={handleSubmit}>
<ulaznitip="tekst"ref={inputRef} />
<dugmetip="podnijeti">podnijetidugme>
oblik>
 );
}

Ovaj primjer referencira ulaznu komponentu pomoću kuke useRef. Možete pristupiti ulaznoj vrijednosti bez ponovnog iscrtavanja nakon što pošaljete obrazac.

Optimizirajte rukovatelje događajima uz useCallback

The useCallback kuka vam omogućuje da memorirati rukovatelje događajima i druge funkcije koje prosljeđujete podređenim komponentama kao rekvizitima. Kao posljedica toga, možda neće biti potrebno ponovno prikazati podređene komponente. Evo primjera:

uvoz Reagiraj, {useCallback, useState} iz'reagirati';
funkcijaOblik() {
konst [vrijednost, setValue] = useState('');

konst handleChange = useCallback((događaj) => {
 setValue (event.target.value);
 }, []);
konst handleSubmit = useCallback((događaj) => {
 event.preventDefault();
konzola.log (vrijednost);
 }, [vrijednost]);
povratak (


"tekst" value={value} onChange={handleChange} />
"podnijeti">Pošalji</button>
 </form>
 );
}

Ovaj primjer koristi kuku useCallback za memoriranje handleChange i rukovanjePošalji funkcije. To može spriječiti nepotrebno ponovno iscrtavanje gumba i informacijskih komponenti.

Optimizacija obrazaca s kukicama useRef i useCallback

Pogledajmo neke stvarne primjere kako ubrzati forme u Reactu korištenjem useRef i useCallback kuka.

Debouncing Input

Debouncing input je česta tehnika optimizacije za poboljšanje izvedbe obrasca. To uključuje odgodu korištenja funkcije dok ne prođe određeno vrijeme nakon njezina poziva. Sljedeći primjer koristi kuku useCallback za otklanjanje pogrešaka handleChange metoda. Ova tehnika može poboljšati brzinu elementa unosa i pomoći u izbjegavanju nepotrebnih ažuriranja.

uvoz Reagiraj, {useCallback, useState} iz'reagirati';
funkcijaOblik() {
konst [vrijednost, setValue] = useState('');
konst debouncedHandleChange = useCallback(
 debounce ((vrijednost) => {
konzola.log (vrijednost);
 }, 500),
[]
 );
funkcijahandleChange(događaj) {
setValue(događaj.cilj.vrijednost);
debouncedHandleChange(događaj.cilj.vrijednost);
 }
povratak (
<oblik>
<ulaznitip="tekst"vrijednost={vrijednost}onChange={handleChange} />
oblik>
 );
}
funkcijadebounce(func, čekaj) {
neka pauza;
povratakfunkcija (... args) {
 clearTimeout (vrijeme isteka);
 timeout = setTimeout(() => {
 func.apply(ovaj, args);
 }, čekati);
 };
}

Ovaj primjer koristi funkciju debounce za odgodu izvršenja handleChange metoda za 500 milisekundi. To može poboljšati brzinu elementa unosa i pomoći u izbjegavanju nepotrebnih ažuriranja.

Lijena inicijalizacija

Lijena inicijalizacija je tehnika za odgađanje stvaranja skupih resursa dok stvarno ne budu potrebni. U kontekstu obrazaca, od pomoći je inicijalizacija stanja koje se koristi samo kada se obrazac pošalje.

Sljedeći primjer lijeno inicijalizira formState objekt pomoću kuke useRef. To može poboljšati izvedbu obrasca odgađanjem stvaranja formState objekta dok ne bude stvarno potrebno.

uvoz Reagiraj, {useRef, useState} iz'reagirati';
funkcijaOblik() {
konst [vrijednost, setValue] = useState('');
konst formStateRef = useRef(ništavan);
funkcijarukovanjePošalji(događaj) {
događaj.preventDefault();
konst formState = formStateRef.current || {
 polje1: '',
 polje2: '',
 polje3: '',
 };
konzola.log (formState);
 }
funkcijahandleInputChange(događaj) {
setValue(događaj.cilj.vrijednost);
 }
povratak (
<oblikonSubmit={handleSubmit}>
<ulaznitip="tekst"vrijednost={vrijednost}onChange={handleInputChange} />
<dugmetip="podnijeti">podnijetidugme>
oblik>
 );
}

Ovaj primjer koristi useRef hook za lijeno inicijaliziranje formState objekta. Na taj način možete poboljšati izvedbu obrasca odgađanjem generiranja formState objekta dok ne bude stvarno potreban.

Najbolji primjeri iz prakse za korištenje kuka useRef i useCallback

Da biste povećali korisnost useRef i useCallback kuka, pridržavajte se sljedećih preporučenih praksi:

• Da biste pristupili DOM elementima i optimizirali dugotrajne proračune, koristite upotrebaRef.
• Optimizirajte prop-passed rukovatelje događajima i druge metode pomoću useCallback.
• Kako biste zapamtili funkcije i izbjegli dvaput renderiranje podređenih komponenti, koristite useCallback.
• S debounce-om možete poboljšati izvedbu obrazaca i spriječiti nepotrebna ažuriranja.
• Natjerajte skupe resurse da čekaju dok stvarno ne zatrebaju korištenjem lijene inicijalizacije.

Slijedeći ove najbolje prakse, možete stvoriti brze, učinkovite komponente koje nude glatko korisničko iskustvo i poboljšavaju performanse vaših React aplikacija.

Optimizirajte izvedbu obrasca u Reactu

UseRef i useCallback kuke fantastični su alati koji mogu pomoći u smanjenju nepotrebnih ponovnih renderiranja i ažuriranja, što može poboljšati izvedbu vaših obrazaca.

Ispravnim korištenjem ovih spojnica i praćenjem najboljih praksi kao što su uklanjanje odbijanja ulaza i lijena inicijalizacija skupih resursa, možete razviti obrasce koji su brzi i učinkoviti.