Jak zoptymalizować wydajność formularza w React With useRef i useCallback hooks

React stał się jednym z najpopularniejszych frameworków do tworzenia interfejsów użytkownika. Wielu programistów front-end preferuje bibliotekę JavaScript ze względu na jej skuteczność, wszechstronność i skalowalność. Ale formularz internetowy może nadal powodować problemy z wydajnością, jeśli nie zoptymalizujesz go poprawnie.

React ma haczyki useRef i useCallback, które mogą pomóc w ograniczeniu niepotrzebnych aktualizacji i ponownego renderowania.

Poznaj najskuteczniejsze zastosowania tych haczyków i przyspiesz swoje formularze React.

Zrozumienie hooków useRef i useCallback

Dwie z najbardziej efektywnych funkcji zwiększających wydajność Reacta to hooki useRef i useCallback.

The użyjRef hook generuje zmienne odniesienie, które może utrzymywać się w wielu renderowaniach komponentów. Typowe zastosowania obejmują dostęp do elementów DOM, przechowywanie stanu, który nie powoduje ponownego renderowania oraz buforowanie kosztownych obliczeń.

Możesz użyć funkcji oszczędzania pamięci, użyj wywołania zwrotnego, jako hak w celu zwiększenia funkcjonalności komponentów zależnych od komponentów potomnych. Często używasz tej metody do obsługi zdarzeń i innych procedur przekazywanych jako rekwizyty.

Typowe problemy z wydajnością formularzy w React

Formularze w React mogą mieć problemy z wydajnością ze względu na dużą ilość danych wprowadzanych przez użytkowników i wprowadzanych przez nich zmian. Powolne czasy reakcji, niepotrzebne ponowne renderowanie i złe zarządzanie stanem to częste problemy.

Te problemy są zwykle spowodowane przez:

• Niepotrzebne ponowne renderowanie: Komponent może spowolnić działanie aplikacji przez niepotrzebne ponowne renderowanie z powodu zmian we właściwościach lub wyrażeniach, które nie mają wpływu na wynik.
• Kosztowne obliczenia: składnik może zmniejszyć wydajność aplikacji, jeśli wykonuje kosztowne obliczenia dla każdego renderowania.
• Nieefektywne zarządzanie stanem: Nieefektywne zarządzanie stanem przez komponent może prowadzić do bezsensownych aktualizacji i ponownego renderowania.

Jak używać hooków useRef i useCallback do optymalizacji formularzy

Przyjrzyjmy się, jak wykorzystać hooki useRef i useCallback Reacta do przyspieszenia naszych formularzy.

Dostęp do elementów formularza za pomocą useRef

The użyjRef hook umożliwia dostęp do elementów formularza bez konieczności ponownego renderowania. Jest to szczególnie przydatne w przypadku złożonych projektów z kilkoma komponentami. Oto przykład:

import Reaguj, { useRef } z'reagować';
funkcjonowaćFormularz() {
konst inputRef = useRef(zero);
funkcjonowaćuchwytPrześlij(wydarzenie) {
wydarzenie.preventDefault();
konst inputValue = inputRef.bieżąca.wartość;
konsola.log (wartość wejściowa);
 }
powrót (
<formularzw dniu Prześlij={uchwytPrześlij}>
<wejścietyp="tekst"ref={inputRef} />
<przycisktyp="składać">Składaćprzycisk>
formularz>
 );
}

Ten przykład odwołuje się do komponentu wejściowego za pomocą haka useRef. Możesz uzyskać dostęp do wartości wejściowej bez konieczności ponownego renderowania po przesłaniu formularza.

Zoptymalizuj procedury obsługi zdarzeń za pomocą useCallback

The użyj wywołania zwrotnego haczyk ci na to pozwala zapamiętywać procedury obsługi zdarzeń i inne funkcje które przekazujesz komponentom potomnym jako rekwizyty. W rezultacie ponowne renderowanie komponentów potomnych może nie być konieczne. Oto przykład:

import Reaguj, { useCallback, useState } z'reagować';
funkcjonowaćFormularz() {
konst [wartość, setValue] = useState ('');

konst handleChange = useCallback((wydarzenie) => {
 setValue (zdarzenie.cel.wartość);
 }, []);
konst handleSubmit = useCallback((wydarzenie) => {
 zdarzenie.preventDefault();
konsola.log (wartość);
 }, [wartość]);
powrót (


"tekst" wartość={wartość} onChange={handleChange} />
"składać">Prześlij</button>
 </form>
 );
}

W tym przykładzie użyto haka useCallback do zapamiętania metody uchwytZmień I uchwytPrześlij Funkcje. Może to pomóc w zapobieganiu niepotrzebnemu ponownemu renderowaniu przycisku i elementów informacyjnych.

Optymalizacja formularzy za pomocą hooków useRef i useCallback

Przyjrzyjmy się kilku faktycznym przypadkom przyspieszenia formularzy w React za pomocą haków useRef i useCallback.

Odrzucanie danych wejściowych

Odrzucanie danych wejściowych jest częstą techniką optymalizacji poprawiającą wydajność formularza. Polega na opóźnianiu użycia funkcji do czasu, gdy minie określony czas od jej wywołania. Poniższy przykład używa haka useCallback do debugowania uchwytZmień metoda. Ta technika może poprawić szybkość elementu wejściowego i pomóc uniknąć niepotrzebnych aktualizacji.

import Reaguj, { useCallback, useState } z'reagować';
funkcjonowaćFormularz() {
konst [wartość, setValue] = useState ('');
konst zdebouncedHandleChange = useCallback(
 Obalić((wartość) => {
konsola.log (wartość);
 }, 500),
[]
 );
funkcjonowaćuchwytZmień(wydarzenie) {
ustalić wartość(wydarzenie.cel.wartość);
odrzucona zmiana uchwytu(wydarzenie.cel.wartość);
 }
powrót (
<formularz>
<wejścietyp="tekst"wartość={wartość}naZmień={zmiana uchwytu} />
formularz>
 );
}
funkcjonowaćObalić(Funk, czekaj) {
pozwalać koniec czasu;
powrótfunkcjonować (... argumenty) {
 clearTimeout (limit czasu);
 limit czasu = ustaw limit czasu (() => {
 func.apply(Ten, argumenty);
 }, Czekać);
 };
}

W tym przykładzie użyto funkcji debounce, aby odroczyć wykonanie uchwytZmień metodę o 500 milisekund. Może to poprawić szybkość elementu wejściowego i pomóc uniknąć niepotrzebnych aktualizacji.

Leniwa inicjalizacja

Leniwa inicjalizacja to technika odraczania tworzenia kosztownych zasobów, dopóki nie będą naprawdę potrzebne. W kontekście formularzy pomocne jest zainicjowanie stanu, który jest używany tylko podczas przesyłania formularza.

Poniższy przykład leniwie inicjuje plik Stan formy obiektu za pomocą haka useRef. Może to poprawić wydajność formularza poprzez odroczenie tworzenia obiektu formState, dopóki nie będzie to faktycznie konieczne.

import Reaguj, { useRef, useState } z'reagować';
funkcjonowaćFormularz() {
konst [wartość, setValue] = useState ('');
konst FormStateRef = useRef(zero);
funkcjonowaćuchwytPrześlij(wydarzenie) {
wydarzenie.preventDefault();
konst FormState = formStateRef.current || {
 pole1: '',
 pole2: '',
 pole3: '',
 };
konsola.log (stan formularza);
 }
funkcjonowaćuchwytInputChange(wydarzenie) {
ustalić wartość(wydarzenie.cel.wartość);
 }
powrót (
<formularzw dniu Prześlij={uchwytPrześlij}>
<wejścietyp="tekst"wartość={wartość}naZmień={handleInputChange} />
<przycisktyp="składać">Składaćprzycisk>
formularz>
 );
}

W tym przykładzie użyto haka useRef do leniwego zainicjowania obiektu formState. W ten sposób można poprawić wydajność formularza, opóźniając generowanie obiektu formState do momentu, gdy będzie on faktycznie potrzebny.

Najlepsze praktyki korzystania z hooków useRef i useCallback

Aby zmaksymalizować użyteczność haków useRef i useCallback, przestrzegaj następujących zalecanych praktyk:

• Aby uzyskać dostęp do elementów DOM i zoptymalizować czasochłonne obliczenia, użyj użyjRef.
• Zoptymalizuj procedury obsługi zdarzeń przekazanych przez rekwizyty i inne metody za pomocą użyj wywołania zwrotnego.
• Aby zapamiętać funkcje i uniknąć podwójnego renderowania komponentów potomnych, użyj użyj wywołania zwrotnego.
• Dzięki debounce możesz zwiększyć wydajność formularza i zapobiec niepotrzebnym aktualizacjom.
• Spraw, aby drogie zasoby czekały, aż będą rzeczywiście potrzebne, korzystając z leniwej inicjalizacji.

Postępując zgodnie z tymi najlepszymi praktykami, możesz tworzyć szybkie, wydajne komponenty, które zapewniają płynną obsługę i zwiększają wydajność aplikacji React.

Zoptymalizuj wydajność formularza w React

Haki useRef i useCallback to fantastyczne narzędzia, które mogą pomóc zredukować niepotrzebne ponowne renderowanie i aktualizacje, co może poprawić wydajność twoich formularzy.

Odpowiednio wykorzystując te zaczepy i stosując się do najlepszych praktyk, takich jak odrzucanie danych wejściowych i leniwa inicjalizacja kosztownych zasobów, można opracowywać formularze, które są szybkie i wydajne.