Sissejuhatus React Hooksisse

Kuna ReactJsi teek saab uusi värskendusi, lisatakse palju asju ja mõned on ka aegunud. ReactJs muutub selliste värskenduste tõttu päev-päevalt võimsamaks. Arendajana peate end kursis hoidma igas versioonis ilmuvate uute funktsioonidega.

Kas olete kuulnud React Hooksist?

React Hooks, funktsioon, mis on saadaval React v16.7.0-alfa versioonis, on midagi vinget, mida peaksite teadma.

Siin on reaktiivkonksude teaser.

Ülaltoodud koodis useStateon esimene konks.

Hüppame nüüd probleemi juurde, mida Reacts Hooks lahendab.

Lõppude lõpuks võetakse probleemi lahendamiseks kasutusele iga uus funktsioon. Siin on loetelu asjadest, mida ametlikul veebisaidil on lahendatavate probleemide kohta öelda.

Olekuloogikat on komponentide vahel raske taaskasutada

Taaskasutatavat käitumist ei saa komponendi React külge kinnitada. Hea näide sellest võiks olla kauplusega ühendamine. Kui teil on Reactis kogemusi, võite teada mõnda mustrit, nagu renderdamise rekvisiidid ja kõrgema järgu komponendid, mis võivad selliste probleemide lahendamisel käepärast olla. Selliste mustrite kasutamisel tuleb komponendid nende kasutamiseks ümber korraldada, muutes koodi raskemaks jälgitavaks ja hooldatavaks.

Konksude kasutuselevõtuga saab komponendist välja tuua olekuloogika. See võimaldab seda iseseisvalt testida ja seda saab uuesti kasutada.

Konksude abil saate taaskasutada olekuloogikat ilma komponentide hierarhiat muutmata.

Kompleksseid komponente on raske mõista

On aegu, kus komponent kasvab väikesest olekust olekuloogika juhitamatuks olekuks.

Iga olelusringi meetod sisaldab mõnikord omavahel mitteseotud loogikat. Näiteks võib komponent teostada osa andmete hankimist API-kõnede kaudu componentDidMountja componentDidUpdate. Kuid sama componentDidMountmeetod võib sisaldada ka mõnda mitteseotud loogikat.

See loogika seab sündmuste kuulajad sisse, kui puhastamine toimub aastal componentWillUnmount. Seotud kood, mis muutub koos, jaguneb.

Seotud kood, mis on ühendatud üheks meetodiks, toob kaasa vigu ja vastuolusid.

Sageli puutume kokku olukorraga, kus me pole võimelised riiklike väärtuste tõttu suurt komponenti väiksemateks jagama. Samuti muutub nende testimine keeruliseks.

Selle probleemi lahendamiseks lasevad Hooks teil jagada ühe komponendi väiksemateks funktsioonideks, lähtudes sellest, millised tükid on omavahel seotud. Hea näide sellest võib olla tellimuse seadistamine või andmete toomine , olenemata elutsükli meetodil põhinevast koodijaotusest.

Konksude abil saab reaalajas rohkem funktsioone kasutada ilma tundideta.

Aga kuidas Hooks tegelikult töötab?

Siin on ülaltoodud koodilõik:

Link CodeSandboxile

Kasutamine useStateon konks, millest me räägime.

Nimetame seda funktsiooni komponendi sees, et lisada sellele kohalik olek. Reageerimisel säilitatakse see olek kogu uuesti renderdamise vahel. useStatetagastab paari, millel on praegune oleku väärtus ja funktsioon, mis võimaldab teil väärtust värskendada.

Seda funktsiooni saate helistada sündmuste käitlejalt või mujalt. See sarnaneb this.setStateReacti klassis, kuid see ei ühenda vana ja uut olekut täielikult.

Sellel on ainult üks argument - useStatealgne olek. Selles ülaltoodud näites on algseisund see, 0et meie loendur algab nullist. Pange tähele, et erinevalt this.stateei pea siinne olek tingimata olema objekt - kuid soovi korral võib see olla ka objekt.

Mitme olekumuutuja deklareerimine

Massiivi destruktiivne süntaks annab olekumuutajatele erinevad nimed, mille me deklareerisime kutsudes useState. Need nimed ei kuulu useStateAPI-sse. Selle asemel eeldab React, et kui helistate palju kordi, siis teete seda iga renderdamise ajal samas järjekorras.

Märkus. Konksud on funktsioonid, mis võimaldavad teil funktsiooni komponentide abil reageerida oleku ja olelusringi funktsioonidele. Konksud ei tööta Reacti klassides - need võimaldavad teil Reactit kasutada ilma klassideta.

Mõju konks

Reactiga töötades võite olla juba töötanud andmete hankimise, tellimuste või Reaali komponentide DOM-i käsitsi muutmise kallal. Nimetame neid toiminguid kui "kõrvaltoimeid" (või lühidalt "mõjusid").

Effect Hook, useEffectlisab võime teha kõrvaltoimete funktsiooni komponent. Sellel on sama eesmärk kui componentDidMount, componentDidUpdateja componentWillUnmountklassides React, kuid see on ühendatud üheks API-ks.

Näiteks määrab järgmine komponent dokumendi pealkirja pärast seda, kui React DOM-i värskendab:

Link CodeSandboxile

Helistades useEffectkäskite Reactil käivitada funktsioon „efekt” pärast muudatuste loputamist DOM-is. Efektid deklareeritakse komponendi sees ja neil on seega juurdepääs selle rekvisiitidele ja olekule. Vaikimisi Lasta jookseb mõju pärast iga muuda seda happens- sealhulgas esimese muuta.

Konksude reeglid

Konksud on JavaScripti funktsioonid, kuid neil on kaks täiendavat reeglit:

  • Helistage konksudele ainult kõige kõrgemal tasemel . Ärge proovige helistada konksudesse silmuste, tingimuste või pesastatud funktsioonide sees.
  • Konksud helistage ainult funktsiooni React komponentidest . Ärge proovige helistada konksudele tavalistest JavaScripti funktsioonidest.

Noh, see on kiire pilk React Hooksile. Täpsema kirjelduse saamiseks klõpsake seda linki allpool:

Konksud lühidalt - reageeri

JavaScripti teek kasutajaliideste reakjs.org loomiseks

Head õppimist! ? ?