Huko useRef naudojimas ref'ams React'e

Šioje pamokoje dirbsime su ref'ais. Kad būtų aiškiau, palyginkime huko useRef veikimą su huku useState.

Sukurkime komponentą su mygtuku:

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

Importuokime į komponentą useState:

import { useState } from 'react';

Ir sukurkime state'ą state:

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

Dabar padarykime taip, kad paspaudus mygtuką mūsų state padidėtų vienetu 1. State'o reikšmę atvaizduosime tiesiogiai mygtuko tekste:

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

Aprašykime funkciją mygtuko paspaudimo apdorojimui handleStateClick:

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

Paspaudinėkime mygtuką ir pamatysime, kaip auga state'o reikšmė.

Dabar sukurkime komponentą App, bet naudodami ne state'ą, o ref'ą.

Pirmiausia, importuokime į komponentą useRef:

import { useRef } from 'react';

Ir sukurkime ref'ą ref. Hukas useRef grąžina ref'o objektą su viena savybe current, kuri mūsų ir bus dominti toliau. Nustatykime jo pradinę reikšmę į 0:

const ref = useRef(0);

Uždėkime ant mygtuko paspaudimo apdorojimą. Atminkite, kad mes turime skaityti/keisti ne patį ref, o jo savybę current:

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

Pridėkime funkciją mūsų mygtuko paspaudimo apdorojimui. Čia mes padidinsime current vienetu 1, kaip ir ankstesniame pavyzdyje su state'u. Skirtingai nuo state'o, kur reikalinga funkcija setState jo reikšmei pakeisti, su ref'o savybe mes dirbame tiesiogiai:

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

Dabar paspaudinėkime mūsų mygtuką. Ir ką gi matome? Spaudžiant jį, kaip ir buvo iš pradžių 0, taip ir nebesikeičia.

Jūs, žinoma, galite pradėti abejoti, ar reikšmė apskritai keičiasi. Patikrinkime tai. Tam funkcijoje mygtuko paspaudimo apdorojimo pridėkime dar vieną kodo eilutę su current reikšmės išvedimu į konsolę:

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

Dabar, atsidarę naršyklės konsolę, vėl paspauskime mygtuką ir įsitikinsime, kad reikšmė tikrai keičiasi su kiekvienu paspaudimu ir apgaulės nėra.

Dabar matome, kad skirtingai nuo state'o, ref'o reikšmės pakeitimas nesukelia komponento pervaizdavimo. Todėl mes kiekvieną kartą mygtuko tekste matome pradinę reikšmę 0.

Taigi, jei jūsų duomenys naudojami pervaizdavimui, laikykite juos state'e, o jei pervaizdavimo nereikia, tokiu atveju ref'ų naudojimas gali būti efektyvesnis.

Tegul jūsų komponente yra pastraipa su tekstu 'text' ir mygtukas. Padarykite taip, kad kiekvieną kartą paspaudus mygtuką į pastraipos teksto pabaigą būtų pridedamas šauktukas. Padarykite tai naudodami state'ą.

Sukurkite komponentą App, bet vietoj state'o dabar naudokite ref'ą. Įsitikinkite, kad paspaudus mygtuką pastraipos tekstas nebus keičiamas. Taip pat pridėkite pastraipos teksto atvaizdavimą konsolėje, atsidarykite ją ir įsitikinkite, kad iš tikrųjų tekstas keičiasi.