Jeśli jesteś nowy w React, być może zastanawiasz się, czym są React Hooks i kiedy powinieneś ich używać. React wprowadził hooki dopiero w wydaniu 16.8, ale szybko stały się one istotną cechą biblioteki.
Dowiedz się wszystkiego o podstawach React Hooks i odkryj najlepsze praktyki używania ich w swoich aplikacjach React.
Czym są hooki reakcji?
Hooki React pozwalają używać stanu i innych funkcji Reacta bez pisania dodatkowego kodu. Haki to świetny sposób na uczynienie kodu bardziej czytelnym i łatwiejszym w utrzymaniu.
Jest kilka różne hooki w React, ale najczęściej używanymi są useState i useEffect. Hak useState umożliwia dodawanie stanu do komponentów. Jest to przydatne do takich rzeczy, jak śledzenie danych wprowadzanych przez użytkownika lub zmian w formularzu. Hak useEffect umożliwia uruchamianie funkcji za każdym razem, gdy komponent jest renderowany. Jest to przydatne w przypadku pobierania danych z interfejsu API lub konfigurowania subskrypcji.
Kiedy należy używać haków reagowania?
Powinieneś używać React Hooks zawsze, gdy potrzebujesz dodać dodatkową funkcjonalność do komponentu. Na przykład, jeśli chcesz śledzić dane wprowadzane przez użytkownika, użyjesz haka useState. Jeśli potrzebujesz pobrać dane z interfejsu API, użyj haka useEffect. Możesz również
tworzyć niestandardowe haki dla wywołań API.Jeśli dopiero zacząłeś używać Reacta, być może nie musisz jeszcze używać hooków. Ale w miarę tworzenia bardziej złożonych aplikacji przekonasz się, że hooki to świetny sposób na dodanie dodatkowych funkcji do komponentów.
Najlepsze praktyki z hakami reagowania
Teraz, gdy już wiesz, czym są React Hooks i kiedy ich używać, porozmawiajmy o kilku najlepszych praktykach.
1. Tylko wywołuj hooki z funkcji React
Powinieneś wywoływać React Hooks tylko z funkcji React. Jeśli spróbujesz wywołać hooki reakcji z komponentu klasy, pojawi się błąd.
Dzieje się tak dlatego, że React Hook można wywołać tylko z funkcji React. Funkcje reakcji to komponenty, które deklarujesz za pomocą słowa kluczowego function.
Oto przykład komponentu funkcji React:
import Reaguj, { stan użycia } z 'reagować';funkcjonowaćAplikacja() {
konst [liczba, ustawLiczba] = użyjStan(0);
powrót (
<dz>
<P>{liczyć}</P>
<przycisk onClick={() => setCount (liczba + 1)}>
Kliknij
</button>
</div>
);
}
A oto przykład komponentu klasy:
import Reaguj, { Komponent } z 'reagować';klasaAplikacjarozciąga sięCzęść{
stan = {
liczyć: 0
};
renderowanie() {
powrót (
<dz>
<P>{ten.stan.liczba}</P>
<przycisk onClick={() => this.setState({ liczba: this.state.count + 1 })}>
Kliknij
</button>
</div>
);
}
}
Pierwszy przykład deklaruje komponent App przy użyciu słowa kluczowego function, a drugi używa słowa kluczowego class.
2. Użyj tylko jednego haka useEffect
Jeśli używasz haka useEffect, powinieneś używać tylko jednego na komponent. Dzieje się tak, ponieważ useEffect jest uruchamiany za każdym razem, gdy komponent jest renderowany.
Jeśli masz wiele haków useEffect, wszystkie będą uruchamiane za każdym razem, gdy komponent zostanie wyrenderowany. Może to prowadzić do nieoczekiwanych problemów z zachowaniem i wydajnością. W poniższym przykładzie oba useEffects będą uruchamiane za każdym razem, gdy komponent App będzie renderowany.
import Reaguj, { useState, useEffect } z 'reagować';funkcjonowaćAplikacja() {
konst [liczba, ustawLiczba] = użyjStan(0);użyjEfektu(() => {
log konsoli ('Będzie to działać za każdym razem, gdy komponent aplikacji będzie renderowany!');
}, []);użyjEfektu(() => {
log konsoli ('Będzie to również działać za każdym razem, gdy komponent aplikacji będzie renderowany!');
}, []);
powrót (
<dz>
<P>{liczyć}</P>
<przycisk onClick={() => setCount (liczba + 1)}>
Kliknij
</button>
</div>
);
}
Zamiast używać wielu haków useEffect, możesz użyć pojedynczego haka useEffect i umieścić w nim cały swój kod. W poniższym przykładzie tylko jeden hak useEffect zostanie uruchomiony podczas renderowania komponentu aplikacji.
import Reaguj, { useState, useEffect } z 'reagować';funkcjonowaćAplikacja() {
konst [liczba, ustawLiczba] = użyjStan(0);użyjEfektu(() => {
log konsoli ('Będzie to działać za każdym razem, gdy komponent aplikacji będzie renderowany!');
log konsoli ('Będzie to również działać za każdym razem, gdy komponent aplikacji będzie renderowany!');
}, []);
powrót (
<dz>
<P>{liczyć}</P>
<przycisk onClick={() => setCount (liczba + 1)}>
Kliknij
</button>
</div>
);
}
Oznacza to, że możesz wywoływać React Hooks tylko z pierwszego przykładu. Jeśli spróbujesz wywołać React Hooks z drugiego przykładu, pojawi się błąd.
3. Użyj haków na najwyższym poziomie
Jedną z najlepszych praktyk z React Hooks jest używanie ich na najwyższym poziomie. Powinieneś unikać używania haków wewnątrz pętli, warunków lub funkcji zagnieżdżonych. Na przykład, jeśli użyjeszState wewnątrz pętli for, za każdym razem, gdy pętla zostanie uruchomiona, React utworzy nową zmienną stanu. Może to prowadzić do nieoczekiwanego zachowania.
import Reaguj, { stan użycia } z 'reagować';funkcjonowaćAplikacja() {
Do (pozwalać ja = 0; ja < 10; i++) {
// Nie rób tego!
konst [liczba, ustawLiczba] = użyjStan(0);
}
powrót (
<dz>
<P>{liczyć}</P>
<przycisk onClick={() => setCount (liczba + 1)}>
Kliknij
</button>
</div>
);
}
W powyższym przykładzie komponent App będzie renderował licznik i przycisk tylko z ostatniej iteracji pętli. Dzieje się tak, ponieważ React aktualizuje zmienną stanu tylko z ostatniej iteracji.
Zamiast używaćState wewnątrz pętli, możesz zadeklarować zmienną stanu poza pętlą. W ten sposób React utworzy tylko jedną zmienną stanu i odpowiednio ją zaktualizuje.
import Reaguj, { stan użycia } z 'reagować';funkcjonowaćAplikacja() {
// To jest właściwy sposób użycia useState wewnątrz pętli
konst [liczba, ustawLiczba] = użyjStan(0);Do (pozwalać ja = 0; ja < 10; i++) {
// ...
}
powrót (
<dz>
<P>{liczyć}</P>
<przycisk onClick={() => setCount (liczba + 1)}>
Kliknij
</button>
</div>
);
}
4. Nie nadużywaj haków
React Hooks to potężne narzędzie, ale powinieneś unikać ich nadużywania. Jeśli zauważysz, że używasz wielu haków w każdym komponencie, możesz ich nadużywać.
React Hooks są najbardziej przydatne, gdy trzeba współdzielić stan między wieloma komponentami. Unikaj używania zbędnych haków, ponieważ mogą one utrudniać czytanie kodu, a jeśli są używane w nadmiernych ilościach, mogą wpływać na wydajność.
Dodaj więcej funkcjonalności za pomocą haków React 18
Wraz z wydaniem React 18 dostępne są nowe haki. Każdy hak jest specyficzny dla określonej funkcji React. Listę wszystkich dostępnych hooków znajdziesz na stronie React. Ale najczęściej używanymi hakami są nadal useState i useEffect.
