UseRef āķis darbam ar refs React

Šajā nodarbībā mēs strādāsim ar refs. Lai būtu skaidrāk, apskatīsim āķa useRef darbību salīdzinājumā ar āķi useState.

Izveidosim komponentu ar pogu:

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

Importēsim komponentā useState:

import { useState } from 'react';

Un izveidosim stāvokli state:

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

Un tagad darīsim tā, lai, noklikšķinot uz pogas, mūsu state palielinātos par 1. Stāvokļa vērtību izvadīsim tieši pogas tekstā:

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

Aprakstīsim funkciju klikšķa apstrādei uz pogas handleStateClick:

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

Pānoklikšķināsim uz pogas un redzēsim, kā aug stāvokļa vērtība.

Un tagad izveidosim komponentu App, bet izmantojot ne stāvokli, bet ref.

Vispirms importēsim komponentā useRef:

import { useRef } from 'react';

Un izveidosim ref ref. Savā rezultātā āķis useRef atgriež refa objektu ar vienīgo īpašību current, kas mūs turpmāk arī interesēs. Iestatīsim tā sākotnējo vērtību uz 0:

const ref = useRef(0);

Uzliksim uz pogas klikšķa apstrādātāju. Atcerieties, ka mums jālasa/maina nevis pats ref, bet tā īpašība current:

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

Pievienosim funkciju klikšķa apstrādei uz mūsu pogas. Šeit mēs palielināsim current par 1, tāpat kā iepriekšējā piemērā ar stāvokli. Atšķirībā no stāvokļa, kur ir nepieciešama funkcija setState, lai mainītu tā vērtību, ar refa īpašību mēs strādājam tieši:

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

Tagad pānoklikšķināsim uz mūsu pogas. Un ko mēs redzam? Noklikšķinot uz tās, kā mums sākotnēji bija 0, tā tas arī nemainās.

Jūs, protams, varat sākt šaubīties par to, ka vērtība vispār mainās. Pārbaudīsim to. Lai to izdarītu, funkcijā klinšķa apstrādātājam pievienosim vēl vienu koda rindiņu ar current vērtības izvadi konsole:

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

Un tagad, atverot pārlūkprogrammas konsoli, atkal pānoklikšķināsim uz pogas un pārliecināsimies, ka vērtība tiešām mainās ar katru klikšķi un nekāda mānīšanās nav.

Tagad mēs redzam, ka atšķirībā no stāvokļa, refa vērtības maiņa neizraisa komponenta atkārtotu renderēšanu. Tāpēc mēs katru reizi pogas tekstā redzam sākotnējo vērtību 0.

Tādējādi, ja jūsu dati tiek izmantoti renderēšanai, tad glabājiet tos stāvoklī, bet, ja jums nav nepieciešama atkārtota renderēšana, šādā gadījumā refu izmantošana var būt efektīvāka.

Lai jūsu komponentā ir rindkopa ar tekstu 'text' un poga. Izdariet tā, lai katru reizi, noklikšķinot uz pogas, rindkopas tekstam beigās pievienotos izsaukuma zīme. Izdariet to ar stāvokļa palīdzību.

Izveidojiet komponentu App, bet stāvokļa vietā tagad izmantojiet ref. Pārliecinieties, ka, nospiežot pogu, rindkopas teksts nemainīsies. Pievienojiet arī rindkopas teksta izvadi konsole, atveriet to un pārliecinieties, ka patiesībā teksts mainās.