Hook useRef ref-idega töötamiseks React-is

Selles õppetükis töötame ref-idega. Selguse huvides analüüsime hook-i useRef tööd võrdluses hook-iga useState.

Loome komponendi nupuga:

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

Impordime komponenti useState:

import { useState } from 'react';

Ja loome state-i state:

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

Ja nüüd teeme nii, et klikkides nupule suurendaks meie state 1 võrra. State-i väärtust kuvame otse nupu tekstis:

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

Kirjeldame funktsiooni kliki töötlemiseks nupul handleStateClick:

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

Vajutame nuppu ja näeme, kuidas state-i väärtus kasvab.

Ja nüüd loome komponendi App, kuid kasutame mitte state-i, vaid ref-i.

Alustuseks impordime komponenti useRef:

import { useRef } from 'react';

Ja loome ref-i ref. Hook useRef tagastab ref-i objekti ainsa omadusega current, mis meid edaspidi huvitama hakkab. Määrame selle algväärtuseks 0:

const ref = useRef(0);

Paneme nupule klick-i töötleja. Pidage meeles, et me peame lugema/muutma mitte ref ennast, vaid selle omadust current:

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

Lisame funktsiooni kliki töötlemiseks meie nupul. Siin me suurendame current 1 võrra, nagu eelmises state-i näites. Erinevalt state-ist, kus on vaja funktsiooni setState selle väärtuse muutmiseks, töötame ref-i omadusega otse:

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

Nüüd vajutame meie nuppu. Ja mida me näeme? Klikkides sellele, nagu meil algselt oli 0, nii see ka ei muutu.

Te võite muidult hakata kahtlema selles, et väärtus üldse muutub. Kontrollime seda. Selleks lisame funktsiooni kliki töötlejasse veel ühe koodirea väärtuse current väljastamiseks konsooli:

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

Ja nüüd, avades brauseris konsooli, uuesti klikkime nupul ja veendume, et väärtus tõesti muutub iga klikiga ja pettust pole.

Nüüd me näeme, et erinevalt state-ist, ref-i väärtuse muutmine ei kutsu esile komponendi uuesti renderdamist. Seetõttu me iga kord nupu tekstis näeme algset väärtust 0.

Seega, kui teie andmeid kasutatakse renderdamiseks, siis hoidke neid state-is, aga kui te ei vaja uuesti renderdamist, sel juhul võib ref-ide kasutamine olla efektiivsem.

Olgu teie komponendis on lõik teksti 'text' ja nupp. Tehke nii, et iga kord klikkides nupule lõigu teksti lõppu lisatakse hüüumärk. Tehke seda state-i abil.

Looge komponent App, kuid state-i asemel kasutage nüüd ref-i. Veenduge, et nuppu vajutades lõigu tekst ei muutuks. Lisage ka lõigu teksti väljastamine konsooli, avage see ja veenduge, et tegelikult tekst muutub.