Kako optimizirati delovanje obrazca v Reactu s kavlji useRef in useCallback

React je postal eno najbolj priljubljenih ogrodij za ustvarjanje uporabniških vmesnikov. Mnogi front-end razvijalci dajejo prednost knjižnici JavaScript zaradi njene učinkovitosti, vsestranskosti in razširljivosti. Toda spletni obrazec lahko še vedno povzroči težave pri delovanju, če ga ne optimizirate pravilno.

React ima kljuki useRef in useCallback, ki lahko pomagata z zmanjšanjem nepotrebnih posodobitev in ponovnega upodabljanja.

Raziščite najučinkovitejše aplikacije teh kavljev in pospešite obrazce React.

Razumevanje zavojev useRef in useCallback

Dve Reactovi najučinkovitejši funkciji za izboljšanje zmogljivosti sta kljuki useRef in useCallback.

The useRef hook ustvari spremenljivo referenco, ki lahko vztraja v številnih upodobitvah komponent. Pogoste uporabe vključujejo dostop do elementov DOM, shranjevanje stanja, ki ne sproži ponovnega upodabljanja, in predpomnjenje dragih izračunov.

Uporabite lahko funkcijo za učinkovito porabo pomnilnika, useCallback, kot kavelj za izboljšanje funkcionalnosti komponent, ki so odvisne od podrejenih komponent. To metodo običajno uporabljate za obdelovalce dogodkov in druge rutine, ki se prenašajo kot pripomočki.

Pogoste težave z delovanjem obrazca v Reactu

Obrazci v Reactu imajo lahko pomisleke glede učinkovitosti zaradi velike količine uporabniških vnosov in sprememb, ki jih dobijo. Pogosti problemi so počasni odzivni časi, nepotrebno ponovno upodabljanje in slabo upravljanje stanja.

Te težave so običajno posledica naslednjega:

• Nepotrebni vnovični upodabljanji: komponenta lahko upočasni aplikacijo z nepotrebnimi vnovičnimi upodabljanji zaradi sprememb rekvizitov ali izrazov, ki ne vplivajo na rezultat.
• Dragi izračuni: komponenta lahko zmanjša zmogljivost aplikacije, če izvaja drage izračune za vsako upodabljanje.
• Neučinkovito upravljanje stanja: neučinkovito upravljanje stanja s strani komponente lahko privede do nesmiselnih posodobitev in ponovnega upodabljanja.

Kako uporabljati kljuke useRef in useCallback za optimizacijo obrazca

Oglejmo si, kako izkoristiti Reactove kljuke useRef in useCallback za pospešitev naših obrazcev.

Dostop do elementov obrazca z useRef

The useRef hook omogoča dostop do elementov obrazca brez ponovnega upodabljanja. To je še posebej uporabno za kompleksne modele z več komponentami. Tukaj je primer:

uvoz Odziv, {useRef} od'reagirati';
funkcijoOblika() {
konst inputRef = useRef(nič);
funkcijohandleSubmit(dogodek) {
dogodek.preventDefault();
konst inputValue = inputRef.current.value;
konzola.log (vhodnaVrednost);
 }
vrnitev (
<oblikaonSubmit={handleSubmit}>
<vnosvrsta="besedilo"ref={inputRef} />
<gumbvrsta="oddaj">Predložigumb>
oblika>
 );
}

Ta primer se sklicuje na vhodno komponento s kavljem useRef. Do vnesene vrednosti lahko dostopate, ne da bi morali po oddaji obrazca znova upodabljati.

Optimizirajte obdelovalce dogodkov z useCallback

The useCallback kavelj vam omogoča memoize obdelovalce dogodkov in druge funkcije ki jih posredujete podrejenim komponentam kot pripomočke. Posledično morda ne bo treba znova upodabljati podrejenih komponent. Tukaj je primer:

uvoz Odziv, {useCallback, useState} od'reagirati';
funkcijoOblika() {
konst [vrednost, setValue] = useState('');

konst handleChange = useCallback((dogodek) => {
 setValue (event.target.value);
 }, []);
konst handleSubmit = useCallback((dogodek) => {
 event.preventDefault();
konzola.log (vrednost);
 }, [vrednost]);
vrnitev (


"besedilo" value={value} onChange={handleChange} />
"oddaj">Pošlji</button>
 </form>
 );
}

Ta primer uporablja kljuko useCallback za shranjevanje na spomin handleChange in handleSubmit funkcije. To lahko pomaga preprečiti nepotrebno ponovno upodabljanje gumba in informacijskih komponent.

Optimizacija obrazca s kavlji useRef in useCallback

Oglejmo si nekaj dejanskih primerov, kako pospešiti obrazce v Reactu z uporabo kavljev useRef in useCallback.

Odbojni vnos

Odpravljanje vnosa je pogosta tehnika optimizacije za izboljšanje zmogljivosti obrazca. Vključuje zakasnitev uporabe funkcije, dokler ne mine določen čas po njenem priklicu. Naslednji primer uporablja kljuko useCallback za odpravljanje napak v handleChange metoda. Ta tehnika lahko izboljša hitrost vnosnega elementa in pomaga preprečiti nepotrebne posodobitve.

uvoz Odziv, {useCallback, useState} od'reagirati';
funkcijoOblika() {
konst [vrednost, setValue] = useState('');
konst debouncedHandleChange = useCallback(
 debounce((vrednost) => {
konzola.log (vrednost);
 }, 500),
[]
 );
funkcijohandleChange(dogodek) {
setValue(dogodek.tarča.vrednost);
debouncedHandleChange(dogodek.tarča.vrednost);
 }
vrnitev (
<oblika>
<vnosvrsta="besedilo"vrednost={value}onChange={handleChange} />
oblika>
 );
}
funkcijodebounce(func, počakaj) {
pustiti odmor;
vrnitevfunkcijo (... args) {
 clearTimeout (časovna omejitev);
 časovna omejitev = setTimeout(() => {
 func.apply(to, args);
 }, čakati);
 };
}

Ta primer uporablja funkcijo debounce za odložitev izvedbe handleChange metodo za 500 milisekund. To lahko izboljša hitrost vnosnega elementa in pomaga preprečiti nepotrebne posodobitve.

Lena inicializacija

Lena inicializacija je tehnika za odlog ustvarjanja dragih virov, dokler jih res ne potrebujemo. V kontekstu obrazcev je koristna inicializacija stanja, ki se uporabi samo, ko obrazec predloži.

Naslednji primer leno inicializira formState objekt z uporabo kljuke useRef. To lahko izboljša delovanje obrazca tako, da odloži ustvarjanje objekta formState, dokler ni dejansko potreben.

uvoz Reagiraj, {useRef, useState} od'reagirati';
funkcijoOblika() {
konst [vrednost, setValue] = useState('');
konst formStateRef = useRef(nič);
funkcijohandleSubmit(dogodek) {
dogodek.preventDefault();
konst formState = formStateRef.current || {
 polje1: '',
 polje2: '',
 polje3: '',
 };
konzola.log (formState);
 }
funkcijohandleInputChange(dogodek) {
setValue(dogodek.tarča.vrednost);
 }
vrnitev (
<oblikaonSubmit={handleSubmit}>
<vnosvrsta="besedilo"vrednost={value}onChange={handleInputChange} />
<gumbvrsta="oddaj">Predložigumb>
oblika>
 );
}

Ta primer uporablja kljuko useRef za leno inicializacijo objekta formState. S tem lahko izboljšate zmogljivost obrazca tako, da odložite generiranje objekta formState, dokler ni dejansko potreben.

Najboljše prakse za uporabo zavojev useRef in useCallback

Če želite čim bolj povečati uporabnost kavljev useRef in useCallback, upoštevajte naslednje priporočene prakse:

• Za dostop do elementov DOM in optimizacijo zamudnih izračunov uporabite useRef.
• Optimizirajte obdelovalce dogodkov, ki so posredovani prop, in druge metode z uporabo useCallback.
• Če si želite zapomniti funkcije in se izogniti dvakratnemu upodabljanju podrejenih komponent, uporabite useCallback.
• Z debounceom lahko izboljšate delovanje obrazca in preprečite nepotrebne posodobitve.
• Naj dragi viri počakajo, dokler jih dejansko ne potrebujejo, z uporabo lene inicializacije.

Z upoštevanjem teh najboljših praks lahko ustvarite hitre in učinkovite komponente, ki nudijo gladko uporabniško izkušnjo in izboljšajo delovanje vaših aplikacij React.

Optimizirajte delovanje obrazca v Reactu

Kavlji useRef in useCallback sta fantastični orodji, ki lahko pomagata zmanjšati nepotrebno ponovno upodabljanje in posodabljanje, kar lahko izboljša učinkovitost vaših obrazcev.

S pravilnim izkoriščanjem teh kavljev in upoštevanjem najboljših praks, kot sta odstranjevanje odbojev od vnosa in lena inicializacija dragih virov, lahko razvijete obrazce, ki so hitri in učinkoviti.