Hooken useRef til arbejde med refs i React

I denne lektion vil vi arbejde med refs. For at gøre det visuelt, lad os analysere arbejdet af hooken useRef i sammenligning med hooken useState.

Lad os oprette en komponent med en knap:

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

Importer useState i komponenten:

import { useState } from 'react';

Og lad os oprette en state state:

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

Og lad os nu gøre det sådan, at når der klikkes på knappen, vil vores state stige med 1. Vi vil udskrive state-værdien lige i knappens tekst:

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

Lad os beskrive funktionen til håndtering af klik på knappen handleStateClick:

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

Lad os trykke på knappen og se, hvordan state-værdien vokser.

Og lad os nu oprette komponenten App, men ved at bruge ikke state, men en ref.

Til at starte med, importer useRef i komponenten:

import { useRef } from 'react';

Og lad os oprette en ref ref. Hooken useRef returnerer som sit resultat et ref-objekt med en enkelt egenskab current, som vil interessere os i fremtiden. Lad os indstille dens startværdi til 0:

const ref = useRef(0);

Lad os tilføje en klik-handler til knappen. Husk, at vi skal læse/ændre ikke selve ref, men dens egenskab current:

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

Lad os tilføje funktionen til håndtering af klik på vores knap. Her vil vi forøge current med 1, ligesom i det foregående eksempel med state. I modsætning til state, hvor der kræves en funktion setState for at ændre dens værdi, arbejder vi direkte med ref-egenskaben:

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

Lad os nu trykke på vores knap. Og hvad ser vi? Når der klikkes på den, forbliver den 0, som den var oprindeligt, og den ændres ikke.

Du kan selvfølgelig begynde at tvivle på, at værdien overhovedet ændres. Lad os tjekke dette. For at gøre dette, tilføjer vi endnu en linje kode i klik-handlerfunktionen med udskrivning af værdien current i konsollen:

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

Og nu, efter at have åbnet konsollen i browseren, lad os igen klikke på knappen og sikre os, at værdien faktisk ændres ved hvert klik, og at der ikke er noget bedrag.

Nu ser vi, at i modsætning til state, udløser ændring af ref-værdien ikke gen-gengivelse af komponenten. Derfor ser vi hver gang i knappens tekst startværdien 0.

Således, hvis dine data bruges til gengivelse, så opbevar dem i state, og hvis du ikke har brug for gengivelse, kan brugen af refs i sådant tilfælde være mere effektivt.

Lad der i din komponent være et afsnit med teksten 'text' og en knap. Gør det sådan, at hver gang der klikkes på knappen tilføjes et udråbstegn i slutningen af afsnittets tekst. Gør dette ved hjælp af state.

Opret komponenten App, men i stedet for state brug nu en ref. Sørg for, at når knappen trykkes, vil afsnittets tekst ikke ændre sig. Tilføj også udskrivning af tekst i konsollen, åbn den og sørg for, at teksten faktisk ændres.