useRef-hookki refien käsittelyyn Reactissa

Tällä oppitunnilla työskentelemme refien kanssa. Selvyyden vuoksi tarkastellaan hookin useRef toimintaa verrattuna hookiin useState.

Luodaan komponentti, jossa on painike:

return (
	<div>
		<button>
			state click
		</button>
	</div>
);

Tuodaan komponenttiin useState:

import { useState } from 'react';

Ja luodaan tila state:

const [state, setState] = useState(0);

Tehdään nyt niin, että painiketta napsautettaessa meidän state kasvaa 1:llä. Tulostamme tilan arvon suoraan painikkeen tekstiin:

<button onClick={handleStateClick}>
	state click: {state}
</button>

Kuvataan painikkeen napsautuksen käsittelevä funktio handleStateClick:

function handleStateClick() {
	setState(state + 1);
}

Painellaan painiketta ja näemme, kuinka tilan arvo kasvaa.

Luodaan nyt App-komponentti käyttämällä ei tilaa, vaan refiä.

Aluksi, tuodaan komponenttiin useRef:

import { useRef } from 'react';

Ja luodaan ref ref. useRef-hookki palauttaa ref-objektin, jolla on yksi ominaisuus current, joka meitä kiinnostaa tulevaisuudessa. Asetamme sen alkuarvoksi 0:

const ref = useRef(0);

Lisätään painikkeelle klikkauskäsittelijä. Muista, että meidän pitää lukea/muuttaa ei itse ref:ä, vaan sen ominaisuutta current:

<button onClick={handleRefClick}>
	ref click: {ref.current}
</button>

Lisätään funktio painikkeen klikkauksen käsittelyyn. Tässä kasvatamme current:ia 1:llä, kuten edellisessä tilan esimerkissä. Toisin kuin tilassa, jossa tarvitaan funktio setState sen arvon muuttamiseen, refin ominaisuuden kanssa työskentelemme suoraan:

function handleRefClick() {
	ref.current = ref.current + 1;
}

Painellaan nyt painikettamme. Ja mitä me naemme? Kun napsautamme sitä, kuten meillä oli aluksi 0, niin se ei muutu.

Voit tietysti epäillä, että arvo muuttuu ollenkaan. Tarkistetaan se. Tehdäksesi tämän funktioon klikkauskäsittelijään lisätään vielä yksi koodirivi current-arvon tulostamiseksi konsoliin:

function handleRefClick() {
	ref.current = ref.current + 1;
	console.log('ref click: ' + ref.current);
}

Avataan nyt konsoli selaimessa, painellaan uudelleen painiketta ja varmistutaan, että arvo todella muuttuu jokaisella klikillä eikä mitään huijausta ole.

Nyt näemme, että toisin kuin tilassa, refin arvon muutos ei aiheuta komponentin uudelleenrenderöintiä. Siksi me joka kerran painikkeen tekstissä näemme alkuperäisen arvon 0.

Jos siis tietojasi käytetään renderöintiin, tallenna ne tilassa, ja jos et tarvitse uudelleenrenderöintiä, refien käyttö voi olla tehokkaampaa.

Olkoon komponentissasi kappale, jossa on teksti 'text' ja painike. Tee niin, että joka kerta kun painiketta napsautetaan tekstikappaleen loppuun lisätään huutomerkki. Tee tämä käyttämällä tilaa.

Luo komponentti App, mutta tilan sijaan käytä nyt refiä. Varmista, että painiketta painettaessa tekstikappaleen teksti ei muutu. Lisää myös tekstikappaleen tekstin tulostus konsoliin, avaa se ja varmista, että teksti todella muuttuu.