Hooken useRef for arbeid med refs i React

I denne leksjonen skal vi jobbe med refs. For å illustrere, la oss analysere arbeidet til hooken useRef i sammenligning med hooken useState.

La oss opprette en komponent med en knapp:

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

Importer useState inn i komponenten:

import { useState } from 'react';

Og la oss opprette en state state:

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

Og la oss nå gjøre slik at ved klikk på knappen øker vår state med 1. Vi vil vise state-verdien rett i knappens tekst:

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

La oss beskrive funksjonen for å håndtere klikk på knappen handleStateClick:

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

La oss trykke på knappen og se hvordan state-verdien vokser.

La oss nå opprette en komponent App, men ved å bruke ikke state, men en ref.

Først, importer useRef inn i komponenten:

import { useRef } from 'react';

Og la oss opprette en ref ref. Hooken useRef returnerer som sitt resultat et ref-objekt med en enkelt egenskap current, som vil være av interesse for oss i fremtiden. La oss sette dens startverdi til 0:

const ref = useRef(0);

La oss legge en klikk-håndterer på knappen. Husk at vi må lese/endre ikke selve ref, men dens egenskap current:

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

La oss legge til en funksjon for å håndtere klikk på knappen vår. Her vil vi øke current med 1, akkurat som i forrige eksempel med state. I motsetning til state, hvor det kreves en funksjon setState for å endre dens verdi, jobber vi direkte med ref-egenskapen:

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

La oss nå trykke på knappen vår. Og hva ser vi? Når vi klikker på den, forblir den 0 som den opprinnelig var, og den endres ikke.

Du kan selvfølgelig begynne å tvile på om verdien i det hele tatt endres. La oss sjekke dette. For å gjøre dette, i funksjonen for klikk-håndtereren, la oss legge til en kodelinje til med utskrift av verdien current i konsollen:

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

Og nå, ved å åpne konsollen i nettleseren, la oss klikke på knappen igjen og forsikre oss om at verdien virkelig endres ved hvert klikk og at det ikke er noe bedrag.

Nå ser vi at i motsetning til state, forårsaker endring av ref-verdien ikke re-rendering av komponenten. Derfor ser vi hver gang i knappens tekst startverdien 0.

Derfor, hvis dine data brukes for rendering, så lagre dem i state, og hvis du ikke trenger rendering, i så fall kan bruk av refs være mer effektivt.

Anta at i komponenten din er det et avsnitt med teksten 'text' og en knapp. Gjør slik at hver gang du klikker på knappen legges et utropstegn til i slutten av avsnittets tekst. Gjør dette ved hjelp av state.

Opprett en komponent App, men i stedet for state bruk nå en ref. Forsikre deg om at når knappen trykkes, vil ikke teksten i avsnittet endres. Legg også til utskrift av teksten i avsnittet i konsollen, åpne den og forsikre deg om at teksten faktisk endres.