Da li ste čuli da se reč „kuka“ da je izgovorena u krugovima web dizajna? To je novi način da vašu aplikaciju za reagovanje učinite prilagodlјivijom i proširivom. React hooks su funkcije koje programerima daju pristup i događajima životnog ciklusa i trenutnom stanju aplikacije, omogućavajući im da izgrade prilagođena ponašanja na vrhu postojećeg API-ja. Ovaj blog će istražiti šta su React hooks, zašto su važne za razvoj reagovanja i neke od naših omilјenih primera.
Hajde da počnemo!
Postavlјanje temelјa na React Hook biblioteke
React hook je prilagođena funkcija koja deluje kao proširenje React API-ja. To možete da zamislite kao pisanje vaših sopstvenih metoda povrh postojećeg skupa metoda koje pružaju druge biblioteke kao što su lodash ili underscore. Sada kada smo definisali šta je React hook, hajde da uđemo u to šta je React hooks biblioteka.
Ok, šta je sa bibliotekom?
React hook biblioteka je jednostavno kolekcija prilagođenih hooks-a namenjenih da zamene ili pobolјšaju postojeće React funkcionalnosti. To znači da možete da koristite iste biblioteke i komponente kao i ranije, ali sada će one koristiti vašu vlastitu prilagođenu verziju ovih funkcija umesto originalne koju pruža Facebook.
Zašto su prilagođene hooks važne
Možda se pitate kakve probleme pokušavamo da rešimo ovim novim konceptom; zašto stvari jednostavno ne bi bile jednostavne i držale se već postojećih rešenja? Pa, postoje dva glavna razloga: ponovna upotreba i sastavlјanje. Ponovna upotreba je u suštini mogućnost da ponovo koristimo kod na efikasan način, dok nam sastavlјanje omogućava da proširimo manje delove u veće bez da se potpuno pokvare pod pritiskom (ovo je koncept sličan objektno orijentisanom programiranju).
Hajde da prvo pogledamo donji primer koji se odnosi na ponovnu upotrebu. React-hooks nam omogućavaju da ponovo koristimo kod kroz ulančavanje. Postoje neke operacije koje mogu da se obave na više načina sa React API-jem, a react-hooks nam omogućavaju da prilagodimo koji metod želimo da koristimo. Na primer, umesto da morate ponovo da pišete kod za svaku rutu u vašoj aplikaciji, možete jednostavno da kreirate RouteHook koji će biti pozvan kad god se ruta promeni. Ovo vam omogućava da definišete vašu sopstvenu metodu za rukovanje rutama, ne ograničavajući vas na ono što je već na mestu.
Kompozicija je drugi aspekt kojeg treba da budemo svesni. React-hooks biblioteke nam omogućavaju da kreiramo delove za višekratnu upotrebu koji zatim mogu da se povežu zajedno da bismo napravili veće delove. To je upravo ono na šta mislimo kada kažemo da su hooks sastavlјive; one nam omogućavaju da izgradimo prilagođene funkcije povrh postojećih.
Zašto bi trebalo da brinete o njihovom korišćenju
Hooks promovišu ideju „podizanja stanja“ koja pomaže da se komponente sastave i ponovo koriste. Takođe olakšava otklanjanje grešaka jer imate samo jedan izvor za logiku umesto nekoliko datoteka.
Koji su neki primeri?
- CicleEffects: omogućava vam da dodate efekte (kao što je animacija) u funkcionalne komponente
- Pobolјšajte vaše komponente!: daje programerima pristup događajima životnog ciklusa tokom vremena rada, a ne samo u vreme montiranja/renderovanja
- Prilagođene hooks: omogućava programerima da napišu njihove sopstvene prilagođene hooks i dele ih sa drugim react korisnicima.
- React Contekt API: omogućava vam da koristite kontekstualni API unutar funkcionalnih komponenti, pošto je ranije bio ograničen samo na klase. To znači da sada možemo da vratimo funkciju iz naše hook umesto da je dodelimo kao svojstvo na instanci klase što je odlično za ponovnu upotrebu koda!
- Redux State Tree HOC: omogućava nam da povežemo stabla stanja direktno u komponente komponenti koristeći komponente višeg reda (HOC). Pruža pristup i prezentacionim komponentama i komponentama tipa kontejnera kreiranjem novih povezanih verzija svakog bez ikakvog znanja o tome kako se implementiraju ili koje zavisnosti imaju. Ovo olakšava testiranje jer ne moramo ničemu da se rugamo!
Resursi i React komponente
- React Hooks API Doc: zvanična dokumentacija iz react-a pruža listu svih dostupnih hooksa kao i kako se koriste
- The Official Documentation for Custom Hooks: pruža potpuni pregled pisanja vaših sopstvenih prilagođenih hooksa i demonstrira njihovu upotrebu u razvoju aplikacija
- On React 16.x, What You Need To Know About Stateless Functional Components &The New Context API By Dan Abramov: ovo je stariji video, ali i dalјe daje sjajan uvid u to zašto su nam potrebni alati za upravlјanje stanjem poput kontekstualnih API-ja i koje probleme rešavaju
- In Depth with Hooks by Lin Clark (React Conf EU 2018): gledajte je kako govori o svemu što treba da se zna o react hooks-u i prilagođenom hook razvoju
- React 16.x: How To Make The Most Of State Management With Context API And Render Props by Aaron Bush (React Conf 2018): govori o različitim načinima na koje možemo da koristimo kontekstualni API unutar naših komponenti, kao i o tome kako funkcionišu rekviziti za renderovanje sa ovim novim setom alata.
10 najbolјih biblioteka
- React-Hook-Form: daje programerima biblioteku za pravlјenje obrazaca koristeći prilagođeni hooks obrazac. Omogućava nam da koristimo postojeće ulazne elemente i priložimo ih direktno u naš obrazac, dok i dalјe imamo pristup metodama životnog ciklusa i objektu stanja.
- HookRouter: biblioteka za upravlјanje rutama i navigacijom. Omogućava vam da upravlјate stablom rutiranja i kreirate vaše sopstvene prilagođene hooks za upotrebu na različitim rutama.
- React-Use-Hover: jednostavan način za dodavanje efekata lebdenja u funkcionalne komponente. Pruža jednostavan i elegantan API za kreiranje ovih vrsta animacija bez potrebe da brinete o složenom procesu renderovanja.
- React Hooks Lib: biblioteka za upravlјanje životnim ciklusom funkcionalnih komponenti. Omogućava nam da upravlјamo višestrukim instancama, što može da bude korisno pri pisanju aplikacija velikih razmera.
- React-Hanger: biblioteka za dodavanje prilagođenih komponenti i funkcionalnosti oko koncepata upravlјanja stanjem. Odlična je za kreiranje funkcija za višekratnu upotrebu uz izbegavanje potrebe za pisanjem novih klasa.
- React Recipes: biblioteka koja pruža skup alata za rad sa upravlјanjem stanjem. Takođe nam omogućava da kreiramo prilagođene hooks i koristimo ih u našim sopstvenim komponentama.
- React-Use: biblioteka laka za korišćenje za upravlјanje upravlјanjem stanjem. Pruža nam alate koji su nam potrebni da kreiramo prilagođene hooks i upravlјamo našim sopstvenim stanjem.
- UseMedia: biblioteka za kreiranje medijskih komponenti. Ona se obično koristi u galerijama i drugim sajtovima ili aplikacijama koje su teške za slike/video, tako da je ovo odličan primer za gledanje na delu i učenje.
- React-Select: biblioteka za kreiranje izabranih menija. Pruža nam više stilova unosa i drugih alata za upravlјanje stanjem.
- UsePortal: biblioteka za kreiranje komponenti portala. Ona se obično koristi za preusmeravanje korisnika iz jednog odelјka aplikacije u drugi, tako da je ovo odličan primer za učenje.
Bonus biblioteka!
React-Context: biblioteka za kreiranje komponenti svesnih konteksta. Pruža alate neophodne za kreiranje prilagođenih provajdera konteksta i potrošača zasnovanih na hook-u.
Srećno dizajniranje!
