Jeśli od jakiegoś czasu pracujesz z Reactem, prawdopodobnie natknąłeś się na pojemnik i elementy prezentacyjne lub inteligentne i głupie komponenty. Te terminy opisują wzorzec która oddziela warstwę interfejsu użytkownika komponentów React od logiki.
Oddzielenie interfejsu użytkownika od logiki biznesowej nie jest niczym wyjątkowym dla React: oddzielenie obaw jest zasadą projektowania, która ma: już w latach 70.. Na przykład powszechną praktyką jest oddzielenie kodu, który uzyskuje dostęp do bazy danych, od logiki biznesowej zaplecza.
Tak więc w React rozwiązaliśmy ten problem, tworząc komponenty kontenerowe, które zawierają całą logikę, która następnie przekazuje dane za pośrednictwem rekwizytów do komponentu prezentacyjnego.
Wraz z wprowadzeniem haków React pojawiło się nowe podejście do tego: używanie niestandardowe haki.
Dlaczego mielibyśmy oddzielić logikę od komponentu?
Zanim zaczniemy oddzielać logikę od naszych komponentów React, powinniśmy wiedzieć dlaczego.
Zorganizowanie naszego kodu w sposób, w którym każda funkcja lub komponent odpowiada tylko za jedną rzecz, ma tę zaletę, że jest ich dużo łatwiejsza do zmiany i utrzymania (Dave i Andrew nazywają to „ortogonalność”w swojej księdze Pragmatyczny programista).
Zastosowanie tego do Reacta oznacza, że nasz komponent będzie wyglądał czyściej i lepiej zorganizowany. Na przykład nie będziemy musieli przewijać ściany logiki przed edycją interfejsu użytkownika.
Zorganizowanie kodu w ten sposób nie tylko sprawia, że wygląda lepiej i jest łatwiejszy w nawigacji, ale także ułatwia wprowadzanie zmian, ponieważ zmiana hooka nie wpływa na interfejs użytkownika i na odwrót.
Testowanie jest również bardziej dostępne: możemy przetestować logikę niezależnie od interfejsu użytkownika, jeśli chcemy. Najważniejszą zaletą dla mnie jest jednak to, jak takie podejście organizuje mój kod.
Jak oddzielić logikę za pomocą haków React
Aby oddzielić logikę od naszego komponentu, najpierw utworzymy niestandardowy hak.
Weźmy ten składnik jako przykład. Oblicza wartość wykładniczą liczby podstawowej i wykładnika:
Możesz znaleźć pełny kod źródłowy tutaj.
Kod wygląda następująco:
export const ExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return (
<div className="blue-wrapper">
<input
type="number"
className="base"
onChange={handleBaseChange}
placeholder="Base"
value={base}
/>
<input
type="number"
className="exponent"
onChange={handleExponentChange}
placeholder="Exp."
value={exponent}
/>
<h1 className="result">{result}</h1>
</div>
);
};
Może to już wyglądać dobrze, ale ze względu na ten samouczek po prostu obraz że jest tu więcej logiki.
W pierwszym kroku będziemy przenieś logikę do niestandardowego haka i nazwij to wewnątrz naszego komponentu.
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = (base ** exponent).toFixed(2);
const handleBaseChange = (e) => {
e.preventDefault();
setBase(e.target.value);
};
const handleExponentChange = (e) => {
e.preventDefault();
setExponent(e.target.value);
};
return {
base,
exponent,
result,
handleBaseChange,
handleExponentChange,
};
};
export const ExponentCalculator = () => {
const {
base,
exponent,
result,
handleExponentChange,
handleBaseChange,
} = useExponentCalculator();
// ...
};
Moglibyśmy przenieść ten hak do oddzielny plik dla bardziej widocznego oddzielenia obaw.
Dodatkowo możemy dodatkowo podzielić nasz haczyk na mniejsze, wielokrotnego użytku funkcje. W tym przypadku możemy tylko wyodrębnić calculateExponent.
użyjExponentCalculator.js
const calculateExponent = (base, exponent) => base ** exponent;
const useExponentCalculator = () => {
const [base, setBase] = useState(4);
const [exponent, setExponent] = useState(4);
const result = calculateExponent(base, exponent).toFixed(2);
// ...
};
Testowanie tych funkcji jest znacznie łatwiejsze niż testowanie całego kodu komponentu z pierwszego przykładu. Moglibyśmy je przetestować za pomocą dowolnej biblioteki testowej Node.js, która nawet nie musi obsługiwać komponentów React.
Mamy teraz nasz kod specyficzny dla frameworka (React) w kodzie komponentu i hooka, podczas gdy nasza logika biznesowa funkcjonuje w różnych funkcjach, które zdefiniowaliśmy później (które są niezależne od frameworka).
Najlepsze praktyki
Naming
Lubię nazywać moje niestandardowe haki po komponencie jako konkatenację use i nazwę komponentu (np. useExponentCalculator). Następnie dzwonię do zapisz to samo jako hak.
Możesz zastosować inną konwencję nazewnictwa, ale polecam pozostawać konsekwentnym w Twoim projekcie.
Jeśli mogę ponownie użyć części niestandardowego hooka, zwykle przenoszę go do innego pliku pod src/hooks.
Nie przesadzaj
Staraj się być pragmatyczny. Jeśli komponent ma tylko kilka wierszy JS, nie ma potrzeby oddzielania logiki.
CSS-w-JS
Jeśli używasz biblioteki CSS-in-JS (useStyles), możesz chcieć przenieść ten kod również do innego pliku.
Możesz przenieść go do tego samego pliku co hak. Wolę jednak albo trzymać go nad komponentem w tym samym pliku, albo przenieść go do własnego pliku, jeśli stanie się zbyt duży.
Wnioski
Niezależnie od tego, czy uważasz, że używanie niestandardowych hooków poprawia twój kod, czy nie, ostatecznie sprowadza się to do osobistych preferencji. Jeśli Twoja baza kodu nie zawiera dużo logiki, zalety tego wzorca nie będą dla Ciebie zbyt istotne.
Niestandardowe haki to tylko jeden sposób na zwiększenie modułowości; Gorąco polecam dzielenie komponentów i funkcji na mniejsze, wielokrotnego użytku kawałki kiedy możliwe.
Temat omawiany jest również na bardziej ogólnym poziomie w Pragmatyczny programista. Napisałem artykuł na moje ulubione tematy książki, więc jeśli cię to interesuje, koniecznie Sprawdź to.
