Sådan optimerer du formularydelsen i React With useRef og useCallback Hooks

React er blevet en af ​​de mest populære rammer til at skabe brugergrænseflader. Mange frontend-udviklere foretrækker JavaScript-biblioteket for dets effektivitet, alsidighed og skalerbarhed. Men en webformular kan stadig forårsage ydeevneproblemer, hvis du ikke optimerer den korrekt.

React har useRef og useCallback hooks, som kan hjælpe ved at reducere unødvendige opdateringer og gengivelser.

Udforsk de mest effektive anvendelser af disse kroge, og fremskynd dine React-formularer.

Forstå brugsreferen og brugen af ​​tilbagekaldskroge

To af Reacts mest effektive præstationsforbedrende funktioner er useRef og useCallback-krogene.

Det brugRef hook genererer en foranderlig reference, der kan bestå på tværs af adskillige komponentgengivelser. Almindelige anvendelser for det omfatter adgang til DOM-elementer, lagring af en tilstand, der ikke udløser en gengivelse, og cachelagring af dyre beregninger.

Du kan bruge den hukommelseseffektive funktion, brug Tilbagekald, som en krog for at forbedre funktionaliteten af ​​komponenter, der afhænger af underordnede komponenter. Du bruger almindeligvis denne metode til hændelseshandlere og andre rutiner, der overføres som rekvisitter.

Almindelige formydelsesproblemer i React

Formularer i React kan have problemer med ydeevnen på grund af den store mængde brugerinput og ændringer, de får. Langsomme svartider, unødvendige gengivelser og dårlig statsforvaltning er hyppige problemer.

Disse problemer er typisk forårsaget af følgende:

• Unødvendige gengivelser: En komponent kan sænke applikationen med unødvendige gengivelser på grund af ændringer i rekvisitter eller udtryk, der ikke har nogen indflydelse på resultatet.
• Dyre beregninger: En komponent kan reducere applikationens ydeevne, hvis den udfører dyre beregninger for hver gengivelse.
• Ineffektiv tilstandsstyring: Ineffektiv tilstandsstyring af en komponent kan føre til meningsløse opdateringer og gengivelser.

Sådan bruger du useRef og brugerCallback Hooks til formularoptimering

Lad os undersøge, hvordan man udnytter Reacts useRef og useCallback-hooks til at fremskynde vores formularer.

Adgang til formularelementer med useRef

Det brugRef hook giver adgang til formelementer uden at resultere i en gengivelse. Dette er især nyttigt til komplekse designs med flere komponenter. Her er et eksempel:

importere Reager, { useRef } fra'reagere';
fungereForm() {
konst inputRef = brugRef(nul);
fungerehandleSend(begivenhed) {
begivenhed.preventDefault();
konst inputValue = inputRef.current.value;
konsol.log (inputVærdi);
 }
Vend tilbage (
<formved indsend={handleSubmit}>
<inputtype="tekst"ref={inputRef} />
<knaptype="Indsend">Indsendknap>
form>
 );
}

Dette eksempel refererer til input-komponenten ved hjælp af useRef-krogen. Du kan få adgang til inputværdien uden at skulle gengive efter du har indsendt formularen.

Optimer hændelseshandlere med useCallback

Det brug Tilbagekald krog giver dig mulighed for huske hændelseshandlere og andre funktioner som du videregiver til underordnede komponenter som rekvisitter. Som følge heraf er det muligvis ikke nødvendigt at gengive underordnede komponenter. Her er et eksempel:

importere Reager, { useCallback, useState } fra'reagere';
fungereForm() {
konst [value, setValue] = useState('');

konst handleChange = brugCallback((begivenhed) => {
 setValue (hændelse.mål.værdi);
 }, []);
konst handleSubmit = brugCallback((begivenhed) => {
 event.preventDefault();
konsol.log (værdi);
 }, [værdi]);
Vend tilbage (


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

Dette eksempel bruger useCallback hook til at huske håndtag Skift og handleSend funktioner. Dette kan hjælpe med at forhindre unødvendig gengivelse af knappen og informationskomponenterne.

Form optimering Med useRef og useCallback Hooks

Lad os se på nogle faktiske tilfælde af, hvordan man fremskynder formularer i React ved at bruge useRef og useCallback-krogene.

Debouncing input

Debouncing-input er en hyppig optimeringsteknik til at forbedre formydelsen. Det indebærer, at man udskyder brugen af ​​en funktion, indtil der er gået en vis tid, efter at den aktiverer. Følgende eksempel bruger useCallback hook til at fejlsøge håndtag Skift metode. Denne teknik kan forbedre input-elementets hastighed og hjælpe med at undgå unødvendige opdateringer.

importere Reager, { useCallback, useState } fra'reagere';
fungereForm() {
konst [value, setValue] = useState('');
konst debouncedHandleChange = useCallback(
 debounce ((værdi) => {
konsol.log (værdi);
 }, 500),
[]
 );
fungerehåndtag Skift(begivenhed) {
sætVærdi(begivenhed.mål.værdi);
debouncedHandleChange(begivenhed.mål.værdi);
 }
Vend tilbage (
<form>
<inputtype="tekst"værdi={værdi}på Skift={handleChange} />
form>
 );
}
fungeredebounce(func, vent) {
lade tiden er gået;
Vend tilbagefungere (...args) {
 clearTimeout (timeout);
 timeout = setTimeout(() => {
 func.apply(det her, args);
 }, vente);
 };
}

Dette eksempel bruger debounce-funktionen til at udskyde udførelsen af håndtag Skift metode med 500 millisekunder. Dette kan forbedre hastigheden af ​​input-elementet og hjælpe med at undgå unødvendige opdateringer.

Doven initialisering

Doven initialisering er en teknik til at udskyde oprettelsen af ​​dyre ressourcer, indtil de virkelig er nødvendige. I forbindelse med formularer er det nyttigt at initialisere en tilstand, der kun bruges, når formularen indsendes.

Følgende eksempel initialiserer dovent formState objekt ved at bruge useRef-krogen. Dette kan forbedre formularens ydeevne ved at udskyde oprettelsen af ​​formState-objektet, indtil det faktisk er nødvendigt.

importere Reager, { useRef, useState } fra'reagere';
fungereForm() {
konst [value, setValue] = useState('');
konst formStateRef = brugRef(nul);
fungerehandleSend(begivenhed) {
begivenhed.preventDefault();
konst formState = formStateRef.current || {
 felt 1: '',
 felt 2: '',
 felt 3: '',
 };
konsol.log (formState);
 }
fungerehandleInputChange(begivenhed) {
sætVærdi(begivenhed.mål.værdi);
 }
Vend tilbage (
<formved indsend={handleSubmit}>
<inputtype="tekst"værdi={værdi}på Skift={handleInputChange} />
<knaptype="Indsend">Indsendknap>
form>
 );
}

Dette eksempel bruger useRef hook til dovent initialisering af formState-objektet. Hvis du gør det, kan det forbedre formularens ydeevne ved at udsætte genereringen af ​​formState-objektet, indtil det faktisk er nødvendigt.

Bedste praksis for brug af useRef og useCallback Hooks

For at maksimere nytten af ​​useRef og useCallback hooks skal du overholde følgende anbefalede praksis:

• For at få adgang til DOM-elementer og optimere tidskrævende beregninger, brug brugRef.
• Optimer prop-beståede hændelseshandlere og andre metoder ved at bruge brug Tilbagekald.
• For at huske funktioner og undgå at gengive underordnede komponenter to gange, brug brug Tilbagekald.
• Med debounce kan du forbedre formularydelsen og forhindre unødvendige opdateringer.
• Få dyre ressourcer til at vente, indtil de rent faktisk er nødvendige ved at bruge doven initialisering.

Ved at følge disse bedste praksisser kan du skabe hurtige, effektive komponenter, der tilbyder en smidig brugeroplevelse og forbedrer ydeevnen af ​​dine React-apps.

Optimer formularydelsen i React

UseRef og useCallback-hooks er fantastiske værktøjer, der kan hjælpe med at reducere unødvendige gengivelser og opdateringer, hvilket kan forbedre ydeevnen af ​​dine formularer.

Ved at udnytte disse kroge korrekt og følge best practices, såsom debouncing input og doven initialisering af dyre ressourcer, kan du udvikle formularer, der er hurtige og effektive.