Johdanto React Hooksiin

Kun ReactJs-kirjasto saa uusia päivityksiä, siihen lisätään paljon asioita ja muutama myös vanhentunut. ReactJs on yhä tehokkaampi päivittäin tällaisten päivitysten ansiosta. Kehittäjänä sinun on pidettävä itsesi ajan tasalla jokaisessa versiossa tulevista uusista ominaisuuksista.

Oletko kuullut React Hooksista?

React Hooks, ominaisuus, joka on saatavana React v16.7.0-alfassa, on jotain mahtavaa, josta sinun pitäisi tietää.

Tässä on teaser React Hooksille.

Yllä olevassa koodissa useStateon ensimmäinen koukku.

Siirrytään nyt ongelmaan, jonka Reacts Hooks ratkaisee.

Loppujen lopuksi jokainen uusi ominaisuus otetaan käyttöön ongelman ratkaisemiseksi. Tässä on luettelo asioista, jotka virallisella reaktiosivustolla on sanottava ongelmista, jotka ratkaistaan.

On vaikea käyttää tilallista logiikkaa komponenttien välillä

Uudelleenkäytettävää käyttäytymistä ei voida liittää React-komponenttiin. Hyvä esimerkki siitä voi olla yhteyden muodostaminen kauppaan. Jos sinulla on jonkin verran kokemusta Reactista, saatat tuntea joitain malleja, kuten renderöintitarvikkeet ja korkeamman asteen komponentit, jotka voivat olla hyödyllisiä tällaisten ongelmien ratkaisemisessa. Tällaisten mallien avulla komponentit on rakennettava uudelleen, jotta niitä voidaan käyttää, mikä tekee koodista vaikeampaa seurata ja ylläpitää.

Koukkujen käyttöönoton avulla komponentista voidaan purkaa tilallinen logiikka. Tämä mahdollistaa sen testaamisen itsenäisesti ja voidaan käyttää uudelleen.

Koukut-sovelluksella voit käyttää tilallista logiikkaa uudelleen muuttamatta komponenttihierarkiaa.

Monimutkaisia ​​komponentteja on vaikea ymmärtää

On aikoja, jolloin komponentti kasvaa pienestä tilasta hallitsemattomaan tilallisen logiikan tilaan.

Jokainen elinkaarimenetelmä sisältää joskus sekoitusta toisiinsa liittymättömästä logiikasta. Esimerkiksi komponentti saattaa suorittaa jonkin verran tietoja hakemalla API-kutsujen kautta componentDidMountja componentDidUpdate. Sama componentDidMountmenetelmä saattaa kuitenkin sisältää myös osan etuyhteydettömästä logiikasta.

Tämä logiikka asettaa tapahtumakuuntelijat puhdistamaan componentWillUnmount. Aiheeseen liittyvä koodi, joka muuttuu yhdessä, hajoaa.

Etuyhteydetön koodi, joka on yhdistetty yhdeksi menetelmäksi, tuo vikoja ja epäjohdonmukaisuuksia.

Olemme usein törmänneet tilanteeseen, jossa emme pysty jakamaan suurta komponenttia pienempiin tilallisten arvojen takia. Lisäksi on vaikea testata niitä.

Tämän ongelman ratkaisemiseksi Koukut antavat sinun jakaa yhden komponentin pienempiin toimintoihin sen mukaan, mitkä kappaleet liittyvät toisiinsa. Hyvä esimerkki siitä voi olla tilauksen asettaminen tai tietojen noutaminen riippumatta elinkaarimenetelmään perustuvasta koodinjaosta.

Koukkujen avulla enemmän Reactin ominaisuuksia voidaan käyttää ilman tunteja.

Mutta miten koukut todella toimivat?

Tässä on koodinpätkä, jonka näimme yllä:

Linkki CodeSandboxiin

Käyttö useStateon koukku, josta puhumme.

Kutsumme sitä funktiokomponentin sisällä lisäämään siihen paikallinen tila. React säilyttää tämän tilan kaikkien uudelleen renderointien välillä. useStatepalauttaa parin, jolla on nykyinen tilan arvo, ja toiminnon, jonka avulla voit päivittää arvon.

Voit soittaa tähän toimintoon tapahtumankäsittelijältä tai muualta. Se on samanlainen kuin this.setStateReact-luokassa, mutta se ei yhdistä vanhaa ja uutta tilaa kokonaan.

Siellä on vain yksi argumentti, useStatejoka on alkutila. Tässä yllä olevassa esimerkissä alkutila johtuu 0siitä, että laskuri alkaa nollasta. Huomaa, että toisin kuin this.statetässä olevan valtion ei tarvitse välttämättä olla objekti - mutta se voi olla objekti, jos haluat.

Ilmoitetaan useita tilamuuttujia

Taulukkoa tuhoava syntaksin antavat eri nimet tilamuuttujille, jotka ilmoitimme kutsumalla useState. Nämä nimet eivät kuulu useStateAPI: n osaan . Sen sijaan React olettaa, että jos soitat paljon monta kertaa, teet sen samassa järjestyksessä jokaisen renderöinnin aikana.

Huomaa: Koukut ovat toimintoja, joiden avulla voit "kytkeytyä" reaktiotilaan ja elinkaaren ominaisuuksiin toimintokomponenteista. Koukut eivät toimi React-luokissa - niiden avulla voit käyttää Reactia ilman luokkia.

Vaikutuskoukku

Reactin kanssa työskennellessäsi olet ehkä jo työskennellyt tietojen hakemisessa, tilauksissa tai DOM: n muuttamisessa manuaalisesti React-komponenteista. Kutsumme näitä toimintoja "sivuvaikutuksiksi" (tai lyhyesti "vaikutuksiksi").

Effect Hook, useEffectlisää kyvyn suorittaa sivuvaikutuksia toimintokomponentista. Sillä on sama tarkoitus kuin componentDidMount, componentDidUpdateja componentWillUnmountReact-luokissa, mutta se on yhdistetty yhdeksi API: ksi.

Esimerkiksi seuraava komponentti asettaa asiakirjan otsikon, kun React päivittää DOM: n:

Linkki CodeSandboxiin

Kun soitat useEffect, käsket Reactia suorittamaan "efekti" -toimintosi muutosten huuhtelemisen jälkeen DOM: iin. Vaikutukset ilmoitetaan komponentin sisällä, joten niillä on pääsy sen rekvisiittaan ja tilaan. React suorittaa oletusarvoisesti vaikutukset jokaisen tapahtuneen renderoinnin jälkeen - mukaan lukien ensimmäinen renderöinti.

Koukkujen säännöt

Koukut ovat JavaScript-toimintoja, mutta niillä on kaksi lisäsääntöä:

  • Soita koukkuille vain ylätasolla . Älä yritä kutsua koukkuja silmukoihin, ehtoihin tai sisäkkäisiin toimintoihin.
  • Soita Koukut vain React-toimintokomponenteista . Älä yritä soittaa koukkuille tavallisista JavaScript-toiminnoista.

No, tämä on nopea katsaus React Hooksiin. Katso tarkempi kuvaus seuraavasta linkistä:

Koukut yhdellä silmäyksellä - Reagoi

JavaScript-kirjasto käyttöliittymien rakentamiseen reactjs.org

Hyvää oppimista! ? ?