Mikä on koukut ja käyttötarkoitukset?
React on yksi tämän hetken suosituimmista web-kehityksessä käytetyistä kirjastoista. Se on mullistanut tavan, jolla verkkosovelluksia rakennetaan, tehden siitä helpompaa ja tehokkaampaa kuin koskaan ennen. Yksi tärkeimmistä syistä sen suosioon on koukkujen käyttöönotto, mikä on helpottanut kehittäjien tilanhallintaa sovelluksissaan.
Tässä artikkelissa tarkastellaan tarkemmin, mitä koukut ovat ja miten niitä voidaan käyttää React-sovelluksissa. Aloitamme keskustelemalla tilan käsitteestä Reactissa, ennen kuin siirrymme selittämään, mitä koukut ovat ja miten ne toimivat. Annamme myös esimerkkejä siitä, kuinka koukkuja voidaan käyttää erilaisissa React-sovelluksissa.
Tila Reactissa
Ennen kuin voimme keskustella koukuista, meidän on ensin ymmärrettävä tilan käsite Reactissa. Reactissa tilaa käytetään komponentin käyttämien tietojen hallintaan. Nämä tiedot voivat olla mitä tahansa merkkijonosta tai numerosta taulukkoon tai objektiin. Kun komponentin tila muuttuu, React hahmontaa komponentin automaattisesti uudelleen vastaamaan uutta tilaa.
Reactissa on kaksi tapaa hallita tilaa: käyttämällä luokkakomponentteja ja käyttämällä toiminnallisia komponentteja. Luokkakomponentit käyttävät erityistä menetelmää nimeltä setState päivittääkseen komponentin tilan, kun taas toiminnalliset komponentit käyttävät koukkuja tilan hallintaan.
Mitä ovat koukut?
Koukut ovat Reactin uusi ominaisuus, joka esiteltiin versiossa 16.8. Niiden avulla kehittäjät voivat käyttää tila- ja muita React-ominaisuuksia toiminnallisissa komponenteissa. Tämä tarkoittaa, että kehittäjät voivat nyt luoda komponentteja, jotka käyttävät tilaa ilman, että heidän tarvitsee käyttää luokkakomponentteja.
Koukut ovat eri muodoissa, joista jokainen palvelee eri tarkoitusta. Yleisimmin käytetyt koukut ovat useState, useEffect, useContext ja useReducer. Keskustelemme jokaisesta näistä koukuista yksityiskohtaisemmin alla.
useState
UseState-koukkua käytetään toiminnallisten komponenttien tilan hallintaan. Se ottaa alkuarvon argumenttina ja palauttaa taulukon, joka sisältää nykyisen tilan ja funktion, jota voidaan käyttää tilan päivittämiseen. Tässä on esimerkki siitä, kuinka useStatea voidaan käyttää:
``` javascript
tuo React, { useState } "react":sta;
function Esimerkki() {
const [count, setCount] {{0}} useState(0);
paluu (
Napsautit {count} kertaa
);
}
```
Tässä esimerkissä käytämme useStatea laskurin tilan hallintaan. Laskurin alkuarvoksi asetetaan 0 käyttämällä useStatea. Käytämme sitten setCountia päivittämään laskurin arvon aina, kun painiketta napsautetaan.
useEffect
UseEffect-koukkua käytetään sivuvaikutusten tekemiseen toiminnallisissa komponenteissa. Sivuvaikutukset ovat mitä tahansa toimintoja, jotka suoritetaan komponentin ulkopuolella, kuten tietojen hakeminen API:sta tai sivun otsikon päivittäminen.
UseEffect-koukku sisältää kaksi argumenttia: sivuvaikutuksen suorittavan toiminnon ja joukon riippuvuuksia. Funktiota kutsutaan aina, kun komponentti renderöidään, ja riippuvuuksia käytetään määrittämään, milloin funktio tulee kutsua. Tässä on esimerkki useEffectin käytöstä:
``` javascript
tuo React, { useState, useEffect } "react":sta;
function Esimerkki() {
const [count, setCount] {{0}} useState(0);
useEffect(() => {
document.title=`Napsautit ${count} kertaa`;
}, [määrä]);
paluu (
Napsautit {count} kertaa
);
}
```
Tässä esimerkissä käytämme useEffectiä päivittämään sivun otsikko aina, kun laskuri päivitetään. Välitämme laskentamuuttujan sisältävän taulukon useEffectille, joka käskee Reactia kutsumaan funktiota vain, kun määrä muuttuu.
useContext
UseContext-koukkua käytetään kontekstin tarjoajaan tallennettujen tietojen käyttämiseen. Konteksti on tapa jakaa tietoja komponenttien välillä ilman, että sitä välitetään rekvisiitta.
UseContextin käyttämiseksi meidän on ensin luotava kontekstin tarjoaja CreateContext-funktiolla. Voimme sitten käyttää useContextiä päästäksemme palveluntarjoajaan tallennettuihin tietoihin. Tässä on esimerkki useContextin käytöstä:
``` javascript
tuo React, { useState, useContext } "react":sta;
const ThemeContext=React.createContext("light");
function Esimerkki() {
const [teema, setTheme]=useState("light");
paluu (
);
}
function Toolbar() {
const teema=useContext(ThemeContext);
paluu (
Nykyinen teema on: {theme}
);
}
```
Tässä esimerkissä käytämme useContextia päästäksemme ThemeContext-toimittajaan tallennettuun teemamuuttujaan. Voimme päivittää teemamuuttujan napsauttamalla Esimerkki-komponentin painiketta.
useReducer
UseReducer-koukkua käytetään monimutkaisen tilan hallintaan toiminnallisissa komponenteissa. Se on samanlainen kuin useState-koukku, mutta sen sijaan, että se päivittäisi tilan suoraan, se käyttää tilan päivittämiseen vähennystoimintoa.
Vähennysfunktiolla on kaksi argumenttia: nykyinen tila ja toimintaobjekti. Se palauttaa uuden tilan suoritetun toiminnon perusteella. UseReducer-koukku ottaa vähennystoiminnon ja alkutilan argumentteina ja palauttaa taulukon, joka sisältää nykyisen tilan ja lähetystoiminnon, jota voidaan käyttää toimien suorittamiseen. Tässä on esimerkki useReducerin käytöstä:
``` javascript
tuo React, { useReducer } "reactista";
funktion vähentäjä(tila, toiminta) {
kytkin (toiminta.tyyppi) {
tapaus "lisäys":
return { count: state.count + 1 };
tapaus "vähennys":
return { count: state.count - 1 };
oletus:
heittää uusi Error();
}
}
function Esimerkki() {
const [tila, lähetys] {{0}} useReducer(reducer, { count: 0 });
paluu (
Napsautit {state.count} kertaa
);
}
```
Tässä esimerkissä käytämme useReduceria laskurin tilan hallintaan. Välitämme vähennystoiminnon, joka päivittää määrämuuttujan suoritetun toiminnon perusteella. Käytämme sitten lähetystoimintoa toimintojen suorittamiseen.
Johtopäätös
Hookit ovat tehneet React-sovellusten tilanhallinnan helpommaksi kuin koskaan. Niiden avulla voimme luoda toiminnallisia komponentteja, jotka voivat käyttää tila- ja muita React-ominaisuuksia ilman, että tarvitsee käyttää luokkakomponentteja. Tässä artikkelissa olemme keskustelleet Reactin yleisimmin käytetyistä koukuista: useState, useEffect, useContext ja useReducer. Olemme myös antaneet esimerkkejä siitä, kuinka näitä koukkuja voidaan käyttää erilaisissa React-sovelluksissa.
Ymmärtämällä, miten koukut toimivat ja miten niitä käytetään, voit kirjoittaa tehokkaampaa ja ylläpidettävämpää koodia React-sovelluksiin. Jos et ole vielä tehnyt niin, kehotamme sinua käyttämään koukkuja omissa projekteissasi ja kokemaan niiden tuomat edut kehitystyönkulkuasi.