Dlaczego React Hooks? (2023)

Pierwszą rzeczą, którą powinieneś zrobić, gdy masz zamiar nauczyć się czegoś nowego, jest zadanie sobie dwóch pytań:

1. Dlaczego to coś istnieje?

2. Jakie problemy rozwiązuje to coś?

Jeśli nigdy nie opracujesz przekonującej odpowiedzi na oba te pytania, nie będziesz mieć wystarczająco solidnych podstaw, na których można by się oprzeć, zagłębiając się w szczegóły. Te pytania są szczególnie interesujące w odniesieniu do React Hooks. Reakcja byłanajpopularniejszy i najbardziej lubiany framework frontendowyw ekosystemie JavaScript, kiedy zostały wydane hooki. Pomimo istniejących pochwał, zespół React nadal uważał za konieczne zbudowanie i wypuszczenie hooków. Przyczyną jest zagubienie się w różnych postach na Medium i przemyśleniach na blogu na temat Hooks(1) dlaczegoi po co(2) korzyść, mimo dużego uznania i popularności, zespół React postanowił wydać cenne zasoby na budowanie i wypuszczanie hooków. Aby lepiej zrozumieć odpowiedzi na oba te pytania, musimy najpierw przyjrzeć się bliżej temu, jak historycznie pisaliśmy aplikacje React.

utwórzKlasę

Jeśli grałeś w React wystarczająco długo, pamiętaszReact.createClassAPI. To był oryginalny sposób, w jaki tworzyliśmy komponenty React. Wszystkie informacje, których użyjesz do opisania komponentu, zostaną przekazane jako obiektutwórzKlasę.

konst ReposGrid = Reagować.utwórzKlasę({
 getInitialState () {
 powrót {
 repo: [],
 Ładowanie: PRAWDA
 }
 },
 komponentDidMount () {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 },
 składnikDidUpdate (prevProps) {
 Jeśli (prevProps.ID !== Ten.rekwizyty.ID) {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 },
 aktualizacjaRepos (ID) {
 Ten.ustaw stan({ Ładowanie: PRAWDA })
 fetchRepos(ID)
 .Następnie((repo) => Ten.ustaw stan({
 repo,
 Ładowanie: FAŁSZ
 }))
 },
 renderowanie() {
 konst { Ładowanie, repo } = Ten.państwo
 Jeśli (Ładowanie === PRAWDA) {
 powrót <Ładowanie />
 }
 powrót (
 <ul>
 {repo.mapa(({ nazwa, uchwyt, gwiazdy, adres URL }) => (
 <li klucz={nazwa}>
 <ul>
 <li><A href={adres URL}>{nazwa}A>li>
 <li>@{uchwyt}li>
 <li>{gwiazdy} gwiazdyli>
 ul>
 li>
 ))}
 ul>
 )
 }
})

utwórzKlasębył prostym i skutecznym sposobem tworzenia komponentów React. Powód, dla którego React początkowo użyłutwórzKlasęAPI było spowodowane tym, że w tamtym czasie JavaScript nie miał wbudowanego systemu klas. Oczywiście w końcu to się zmieniło. Wraz z ES6, JavaScript wprowadziłklasasłowo kluczowe, a wraz z nim natywny sposób tworzenia klas w JavaScript. To postawiło React w trudnej sytuacji. Kontynuuj używanieutwórzKlasęi walcz z postępem JavaScript lub poddaj się woli standardu EcmaScript i obejmij klasy. Jak pokazała historia, wybrali to drugie.

Reaguj.Komponent

Uznaliśmy, że nie zajmujemy się projektowaniem systemu klas. Chcemy po prostu użyć idiomatycznego sposobu tworzenia klas w JavaScript. -Wydanie React v0.13.0

React v0.13.0 wprowadziłReaguj.KomponentAPI, które umożliwiło tworzenie komponentów React z (teraz) natywnych klas JavaScript. To była duża wygrana, ponieważ lepiej dopasowała React do standardu EcmaScript.

klasa ReposGrid rozciąga się Reagować.Część {
 konstruktor (rekwizyty) {
 Super(rekwizyty)
 Ten.państwo = {
 repo: [],
 Ładowanie: PRAWDA
 }
 Ten.aktualizacjaRepos = Ten.aktualizacjaRepos.wiązać(Ten)
 }
 komponentDidMount () {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 składnikDidUpdate (prevProps) {
 Jeśli (prevProps.ID !== Ten.rekwizyty.ID) {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 }
 aktualizacjaRepos (ID) {
 Ten.ustaw stan({ Ładowanie: PRAWDA })
 fetchRepos(ID)
 .Następnie((repo) => Ten.ustaw stan({
 repo,
(Video) Tygodniówka JS #13 Web Frameworks, React Hooks, Bad Front-end
 Ładowanie: FAŁSZ
 }))
 }
 renderowanie() {
 Jeśli (Ten.państwo.Ładowanie === PRAWDA) {
 powrót <Ładowanie />
 }
 powrót (
 <ul>
 {Ten.państwo.repo.mapa(({ nazwa, uchwyt, gwiazdy, adres URL }) => (
 <li klucz={nazwa}>
 <ul>
 <li><A href={adres URL}>{nazwa}A>li>
 <li>@{uchwyt}li>
 <li>{gwiazdy} gwiazdyli>
 ul>
 li>
 ))}
See Also
10 redenen waarom React-hooks de toekomst van webontwikkeling zijnIntroductie van Hooks - Reageer
 ul>
 )
 }
}

Choć wyraźny krok we właściwym kierunku,Reaguj.Komponentnie było bez kompromisów.

konstruktor

W przypadku komponentów klasy inicjujesz stan komponentu wewnątrz plikukonstruktormetoda jako Apaństwowłaściwość w instancji (Ten). Jednak zgodnie ze specyfikacją ECMAScript, jeśli rozszerzasz podklasę (w tym przypadkuReaguj.Komponent), musisz najpierw wywołaćSuperzanim będziesz mógł użyćTen. W szczególności, korzystając z React, musisz również pamiętać o zaliczeniurekwizytyDoSuper.

 konstruktor (rekwizyty) {
 Super(rekwizyty) // 🤮
 ...
 }

Automatyczne wiązanie

Podczas używaniautwórzKlasę, React automatycznie powiązałby wszystkie metody z instancją komponentu,Ten. ZReaguj.Komponent, tak nie było. Bardzo szybko,Reaguj programistów wszędziezdali sobie sprawę, że nie wiedzą jaksłowo kluczowe thispracował. Zamiast mieć wywołania metod, które „po prostu zadziałały”, trzeba było o tym pamiętać.wiązaćmetody w klasiekonstruktor. Jeśli tego nie zrobisz, otrzymasz popularną właściwość „Nie można odczytaćustaw stanniezdefiniowanego" błędu.

 konstruktor (rekwizyty) {
 ...
 Ten.aktualizacjaRepos = Ten.aktualizacjaRepos.wiązać(Ten) // 😭
 }

Teraz wiem, co możesz sobie pomyśleć. Po pierwsze, te kwestie są dość powierzchowne. Jasne, że dzwonięsuper (rekwizyty)i pamiętając owiązaćTwoje metody są irytujące, ale nie ma w tym nic zasadniczo złego. Po drugie, niekoniecznie są to nawet problemy z Reactem w takim samym stopniu, jak ze sposobem projektowania klas JavaScript. Oba punkty są aktualne. Jesteśmy jednak programistami. Nawet najbardziej powierzchowne problemy stają się uciążliwe, gdy masz do czynienia z nimi ponad 20 razy dziennie. Na szczęście dla nas, wkrótce po zmianie zutwórzKlasęDoReaguj.Komponent,Pola klasypowstała propozycja.

Pola klasy

Pola klas umożliwiają dodawanie właściwości instancji bezpośrednio jako właściwości klasy bez konieczności ich używaniakonstruktor. Dla nas oznacza to, że dzięki Class Fields oba nasze „powierzchowne” problemy, o których mówiliśmy wcześniej, zostaną rozwiązane. Nie musimy już używaćkonstruktoraby ustawić stan początkowy komponentu i nie musimy już tego robić.wiązaćwkonstruktorponieważ moglibyśmy użyć funkcji strzałek dla naszych metod.

klasa ReposGrid rozciąga się Reagować.Część {
 państwo = {
 repo: [],
 Ładowanie: PRAWDA
 }
 komponentDidMount () {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 składnikDidUpdate (prevProps) {
 Jeśli (prevProps.ID !== Ten.rekwizyty.ID) {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 }
 aktualizacjaRepos = (ID) => {
 Ten.ustaw stan({ Ładowanie: PRAWDA })
 fetchRepos(ID)
 .Następnie((repo) => Ten.ustaw stan({
 repo,
 Ładowanie: FAŁSZ
 }))
 }
 renderowanie() {
 konst { Ładowanie, repo } = Ten.państwo
 Jeśli (Ładowanie === PRAWDA) {
 powrót <Ładowanie />
 }
 powrót (
 <ul>
 {repo.mapa(({ nazwa, uchwyt, gwiazdy, adres URL }) => (
 <li klucz={nazwa}>
 <ul>
 <li><A href={adres URL}>{nazwa}A>li>
 <li>@{uchwyt}li>
 <li>{gwiazdy} gwiazdyli>
 ul>
 li>
 ))}
(Video) Marcin Hagmajer - Why we’ll all use React Hooks / FRONTEND CON 2018
 ul>
 )
 }
}

Więc teraz jesteśmy dobrzy, prawda? Niestety nie. Ruch odutwórzKlasęDoReaguj.Komponentwiązało się z pewnymi kompromisami, ale jak widzieliśmy, Class Fields zadbał o to. Niestety, we wszystkich poprzednich wersjach, które widzieliśmy, nadal istnieją pewne głębsze (ale mniej o nich mówione) problemy.

Cała idea React polega na tym, że możesz lepiej zarządzać złożonością aplikacji, dzieląc ją na oddzielne komponenty, które następnie możesz skomponować razem. Ten model komponentów sprawia, że ​​React jest tak elegancki. To sprawia, że ​​Reaguj, Reaguj. Problem nie leży jednak w modelu komponentowym, ale w sposobie implementacji modelu komponentowego.

Zduplikowana logika

W przeszłości struktura naszych komponentów React była powiązana z cyklem życia komponentu. Ten podział w naturalny sposób zmusza nas do rozproszenia powiązanej logiki w całym komponencie. Widzimy to wyraźnie wReposGridprzykład, z którego korzystaliśmy. Potrzebujemy trzech oddzielnych metod (komponentDidMount,składnikDidUpdate, IaktualizacjaRepos), aby osiągnąć to samo - zachowaćrepow synchronizacji z czymkolwiekrekwizyty.idJest.

 komponentDidMount () {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 składnikDidUpdate (prevProps) {
 Jeśli (prevProps.ID !== Ten.rekwizyty.ID) {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 }
 aktualizacjaRepos = (ID) => {
 Ten.ustaw stan({ Ładowanie: PRAWDA })
 fetchRepos(ID)
 .Następnie((repo) => Ten.ustaw stan({
 repo,
 Ładowanie: FAŁSZ
 }))
 }

Aby to naprawić, potrzebowalibyśmy zupełnie nowego paradygmatu sposobu, w jaki radzilibyśmy sobie z efektami ubocznymi w komponentach React.

Udostępnianie logiki niewizualnej

Kiedy myślisz o kompozycji w React, prawdopodobnie myślisz o kompozycji interfejsu użytkownika. Jest to naturalne, ponieważ React jest w tym tak dobry.

pogląd = fn(stan)

Realistycznie rzecz biorąc, tworzenie aplikacji to coś więcej niż tylko warstwa interfejsu użytkownika. Często zdarza się, że trzeba komponować i ponownie wykorzystywać logikę niewizualną. Jednak ponieważ React łączy interfejs użytkownika z komponentem, może to być trudne. Historycznie React nie miał na to dobrej odpowiedzi.

Trzymając się naszego przykładu, załóżmy, że musieliśmy stworzyć kolejny komponent, który również wymagałrepopaństwo. W tej chwili ten stan i logika jego obsługi znajdują się wewnątrzReposGridczęść. Jak byśmy do tego podeszli? Cóż, najprostszym podejściem byłoby skopiowanie całej logiki pobierania i obsługi naszegorepoi wklej go do nowego komponentu. Kuszące, ale nie. Mądrzejszym podejściem byłoby utworzenie plikuKomponent wyższego rzęduktóry zawierał całą wspólną logikę i przeszedłŁadowanieIrepojako rekwizyty do dowolnego komponentu, który tego potrzebował.

funkcjonować z repozytoriami (Część) {
 powrót klasa WithRepos rozciąga się Reagować.Część {
 państwo = {
 repo: [],
 Ładowanie: PRAWDA
 }
 komponentDidMount () {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 składnikDidUpdate (prevProps) {
 Jeśli (prevProps.ID !== Ten.rekwizyty.ID) {
 Ten.aktualizacjaRepos(Ten.rekwizyty.ID)
 }
 }
 aktualizacjaRepos = (ID) => {
 Ten.ustaw stan({ Ładowanie: PRAWDA })
 fetchRepos(ID)
 .Następnie((repo) => Ten.ustaw stan({
 repo,
 Ładowanie: FAŁSZ
 }))
 }
 renderowanie () {
 powrót (
 <Część
 {...Ten.rekwizyty}
 {...Ten.państwo}
 />
 )
 }
 }
}

Teraz, gdy potrzebny jest dowolny komponent w naszej aplikacjirepo(LubŁadowanie), moglibyśmy zawinąć go w naszz repozytoriamiHOC.

// ReposGrid.js
funkcjonować ReposGrid ({ Ładowanie, repo }) {
 ...
}
eksport domyślny z repozytoriami(ReposGrid)

// Profil.js
funkcjonować Profil ({ Ładowanie, repo }) {
 ...
}
(Video) Zasady korzystania z hooków - React Hooks w 5 minut #3
eksport domyślny z repozytoriami(Profil)

To działa i historycznie (wraz zRekwizyty renderowania) jest zalecanym rozwiązaniem do udostępniania logiki niewizualnej. Jednak oba te wzorce mają pewne wady.

Po pierwsze, jeśli nie jesteś z nimi zaznajomiony (a nawet jeśli je znasz), twój mózg może trochę nie działać zgodnie z logiką. Z naszymz repozytoriamiHOC, mamy funkcję, która przyjmuje ostatecznie wyrenderowany komponent jako pierwszy argument, ale zwraca nowy komponent klasy, w którym mieszka nasza logika. Co za zawiły proces.

Następnie, co by było, gdybyśmy mieli więcej niż jeden HOC, który konsumowaliśmy. Jak możesz sobie wyobrazić, dość szybko wymyka się spod kontroli.

eksport domyślny z najechaniem(
 z motywem(
 z autoryzacją(
 z repozytoriami(Profil)
 )
 )
)

Gorsze niż ^ jest to, co ostatecznie zostanie wyrenderowane. HOC (i podobne wzorce) zmuszają do restrukturyzacji i pakowania komponentów. Może to ostatecznie doprowadzić do „piekła opakowania”, co ponownie utrudnia śledzenie.

<Z najechaniem>
 <Z motywem unoszący się={FAŁSZ}>
 <Z autoryzacją unoszący się={FAŁSZ} temat='ciemny'>
 <WithRepos unoszący się={FAŁSZ} temat='ciemny' uwierzytelniony={PRAWDA}>
 <Profil
 ID='JavaScript'
 Ładowanie={PRAWDA}
 repo={[]}
 uwierzytelniony={PRAWDA}
 temat='ciemny'
 unoszący się={FAŁSZ}
 />
 WithRepos>
 Z autoryzacją>
 <Z motywem>
Z najechaniem>

Stan aktulany

Więc tutaj jesteśmy.

• React jest cholernie popularny.
• Używamy klas dla komponentów React, ponieważ to właśnie miało największy sens w tamtym czasie.
• Wywoływanie super(props) jest denerwujące.
• Nikt nie wie, jak to „to” działa.
• Dobra, uspokój się. Wiem, że TY wiesz, jak „to” działa, ale dla niektórych jest to niepotrzebna przeszkoda.
• Organizowanie naszych komponentów według metod cyklu życia zmusza nas do rozproszenia powiązanej logiki w naszych komponentach.
• React nie ma dobrego prymitywu do dzielenia się logiką niewizualną.

Teraz potrzebujemy nowego komponentu API, który rozwiązuje wszystkie te problemy, pozostając jednocześnieprosty,komponowalny,elastyczny, Irozsuwany. Nie lada zadanie, ale jakoś zespołowi React udało się je wykonać.

Haki reakcji

Od Reacta v0.14.0 mieliśmy dwa sposoby tworzenia komponentów – klasy lub funkcje. Różnica polegała na tym, że jeśli nasz komponent miał stan lub musiał korzystać z metody cyklu życia, musieliśmy użyć klasy. W przeciwnym razie, gdyby po prostu zaakceptował rekwizyty i wyrenderował interfejs użytkownika, moglibyśmy użyć funkcji.

A co jeśli tak nie było. Co by było, gdybyśmy zamiast konieczności używania klasy zawsze mogli użyć funkcji.

Czasami elegancka implementacja to tylko funkcja. Nie metoda. Nie klasa. Nie ramy. Po prostu funkcja.

- Johna Carmacka. Oculus VR CTO.

Pewnie, że musielibyśmy wymyślić sposób na dodanie zdolności komponentów funkcjonalnych do posiadania metod stanu i cyklu życia, ale zakładając, że to zrobimy, jakie korzyści byśmy zobaczyli?

Cóż, nie musielibyśmy już dzwonićsuper (rekwizyty), nie musielibyśmy się już martwićwiązaćing naszych metod lubTensłowo kluczowe i nie mielibyśmy już zastosowania dla pól klas. Zasadniczo wszystkie „powierzchowne” problemy, o których mówiliśmy wcześniej, zniknęłyby.

(NIE,_｣Th)Noboru Reagować.Część 🗑
funkcjonować ヾ(Ő‿Ő✿)

Teraz trudniejsze kwestie.

• Państwo
• Metody cyklu życia
• Udostępnianie logiki niewizualnej

Państwo

Ponieważ nie używamy już klas lubTen, potrzebujemy nowego sposobu dodawania i zarządzania stanem wewnątrz naszych komponentów. Począwszy od React v16.8.0, React daje nam ten nowy sposób poprzezstan użyciametoda.

stan użyciato pierwszy z wielu „haków”, które zobaczysz w tym kursie. Niech reszta tego wpisu posłuży jako miękkie wprowadzenie. Będziemy nurkować znacznie głębiejstan użyciajak również inne haki w przyszłych sekcjach.

stan użyciaprzyjmuje pojedynczy argument, początkową wartość stanu. To, co zwraca, to tablica, której pierwszym elementem jest element stanu, a drugim elementem jest funkcja aktualizująca ten stan.

konst ładowanieTuple = Reagować.stan użycia(PRAWDA)
konst Ładowanie = ładowanieTuple[0]
konst ładowanie zestawu = ładowanieTuple[1]
...
Ładowanie // PRAWDA
ładowanie zestawu(FAŁSZ)
Ładowanie // FAŁSZ

Jak widać, chwytanie każdego elementu w tablicy z osobna nie jest najlepszym doświadczeniem dla programistów. To tak dla zademonstrowania jakstan użyciazwraca tablicę. Zazwyczaj używałbyś funkcji destrukturyzacji tablicy, aby pobrać wartości w jednym wierszu.

// const loadingTuple = React.useState(true)
// ładowanie const = loadingTuple[0]
// const setLoading = loadingTuple[1]
konst [ Ładowanie, ładowanie zestawu ] = Reagować.stan użycia(PRAWDA) // 👌

Teraz zaktualizujmy naszeReposGridkomponent z naszą nowo odkrytą wiedzą na tematstan użyciaHak.

funkcjonować ReposGrid ({ ID }) {
 konst [ repo, setRepos ] = Reagować.stan użycia([])
 konst [ Ładowanie, ładowanie zestawu ] = Reagować.stan użycia(PRAWDA)
 Jeśli (Ładowanie === PRAWDA) {
 powrót <Ładowanie />
 }
 powrót (
 <ul>
 {repo.mapa(({ nazwa, uchwyt, gwiazdy, adres URL }) => (
 <li klucz={nazwa}>
 <ul>
 <li><A href={adres URL}>{nazwa}A>li>
 <li>@{uchwyt}li>
 <li>{gwiazdy} gwiazdyli>
(Video) Obsługa stanu z useState - React Hooks w 5 minut #1
 ul>
 li>
 ))}
 ul>
 )
}

• Stan ✅
• Metody cyklu życia
• Udostępnianie logiki niewizualnej

Metody cyklu życia

Oto coś, co może cię zasmucić (lub uszczęśliwić?). Chcę, abyś podczas korzystania z React Hooks wziął wszystko, co wiesz o tradycyjnych metodach cyklu życia React, a także ten sposób myślenia, i zapomniał o tym. Widzieliśmy już problem myślenia w kategoriach cyklu życia komponentu - „To [cykl życia] podziału w naturalny sposób zmusza nas do rozproszenia powiązanej logiki w całym komponencie”. Zamiast tego myśl w kategoriachsynchronizacja.

Pomyśl o każdym przypadku, w którym kiedykolwiek użyłeś zdarzenia cyklu życia. Niezależnie od tego, czy chodziło o ustawienie stanu początkowego komponentu, pobranie danych, aktualizację DOM, cokolwiek - końcowym celem zawsze była synchronizacja. Zazwyczaj synchronizacja czegoś poza React land (żądanie API, DOM itp.) z czymś wewnątrz React land (stan komponentu) lub odwrotnie.

Kiedy myślimy w kategoriach synchronizacji zamiast zdarzeń w cyklu życia, pozwala nam to grupować powiązane elementy logiki. Aby to zrobić, React daje nam kolejny hook o nazwieUżyjEfekt.

zdefiniowany,UżyjEfektpozwala na wykonywanie efektów ubocznych w składowych funkcji. Pobiera dwa argumenty, funkcję i opcjonalną tablicę. Funkcja określa, które efekty uboczne mają zostać uruchomione, a (opcjonalna) tablica określa, kiedy „ponownie zsynchronizować” (lub ponownie uruchomić) efekt.

Reagować.UżyjEfekt(() => {
 dokument.tytuł = `Cześć, ${nazwa użytkownika}`
}, [nazwa użytkownika])

W powyższym kodzie funkcja przekazana doUżyjEfektbędzie działać zawszenazwa użytkownikazmiany. Dlatego synchronizacja tytułu dokumentu z czymkolwiekWitaj, ${nazwa użytkownika}postanawia.

Teraz, jak możemy użyćUżyjEfektPodłącz nasz kod do synchronizacjirepoz naszymfetchReposŻądanie interfejsu API?

funkcjonować ReposGrid ({ ID }) {
 konst [ repo, setRepos ] = Reagować.stan użycia([])
 konst [ Ładowanie, ładowanie zestawu ] = Reagować.stan użycia(PRAWDA)
 Reagować.UżyjEfekt(() => {
 ładowanie zestawu(PRAWDA)
 fetchRepos(ID)
 .Następnie((repo) => {
 setRepos(repo)
 ładowanie zestawu(FAŁSZ)
 })
 }, [ID])
 Jeśli (Ładowanie === PRAWDA) {
 powrót <Ładowanie />
 }
 powrót (
 <ul>
 {repo.mapa(({ nazwa, uchwyt, gwiazdy, adres URL }) => (
 <li klucz={nazwa}>
 <ul>
 <li><A href={adres URL}>{nazwa}A>li>
 <li>@{uchwyt}li>
 <li>{gwiazdy} gwiazdyli>
 ul>
 li>
 ))}
 ul>
 )
}

Całkiem ślisko, prawda? Skutecznie się pozbyliśmyReaguj.Komponent,konstruktor,Super,Tena co ważniejsze, nie mamy już rozproszonej (i powielonej) logiki efektów w całym komponencie.

• Stan ✅
• Metody cyklu życia ✅
• Udostępnianie logiki niewizualnej

Udostępnianie logiki niewizualnej

Wcześniej wspomnieliśmy, że powodem, dla którego React nie miał świetnej odpowiedzi na udostępnianie logiki innej niż wizualna, było to, że „React paruje interfejs użytkownika z komponentem”. Prowadzi to do zbyt skomplikowanych wzorców, takich jakKomponenty wyższego rzęduLubRenderuj rekwizyty. Jak już się pewnie domyślasz, Hooks ma na to odpowiedź. Jednak prawdopodobnie nie jest tak, jak myślisz. Nie ma wbudowanego hooka do udostępniania logiki niewizualnej, zamiast tego możesz tworzyć własne niestandardowe hooki, które są oddzielone od dowolnego interfejsu użytkownika.

Możemy to zobaczyć w akcji, tworząc własny customuseReposHak. Ten hak przyjmieIDrepozytoriów, które chcemy pobrać i (aby trzymać się podobnego API) zwróci tablicę z pierwszym elementem będącymŁadowaniestan, a drugim elementem jestrepopaństwo.

funkcjonować useRepos (ID) {
 konst [ repo, setRepos ] = Reagować.stan użycia([])
 konst [ Ładowanie, ładowanie zestawu ] = Reagować.stan użycia(PRAWDA)
 Reagować.UżyjEfekt(() => {
 ładowanie zestawu(PRAWDA)
 fetchRepos(ID)
 .Następnie((repo) => {
 setRepos(repo)
 ładowanie zestawu(FAŁSZ)
 })
 }, [ID])
 powrót [ Ładowanie, repo ]
}

Fajna jest jakakolwiek logika związana z pobieraniem naszegorepomożna wyodrębnić wewnątrz tego niestandardowego hooka. Teraz, niezależnie od tego, w jakim komponencie się znajdujemy i nawet jeśli jest to logika niewizualna, zawsze, gdy potrzebujemy danych dotyczącychrepo, możemy konsumować naszeuseReposniestandardowy hak.

funkcjonować ReposGrid ({ ID }) {
 konst [ Ładowanie, repo ] = useRepos(ID)
 ...
}

funkcjonować Profil ({ użytkownik }) {
 konst [ Ładowanie, repo ] = useRepos(użytkownik.ID)
 ...
}

• Stan ✅
• Metody cyklu życia ✅
• Udostępnianie logiki niewizualnej ✅

Celem marketingowym hooków jest to, że możesz używać składowych funkcji stanu wewnątrz. W rzeczywistości hooki to znacznie więcej. Chodzi o ulepszone ponowne użycie kodu, kompozycję i lepsze ustawienia domyślne. Haki to jeszcze wiele innych rzeczy, które musimy jeszcze omówić, ale teraz, gdy już wiesz, DLACZEGO istnieją, mamy solidne podstawy, na których możemy budować.