Hooken useRef för att arbeta med refs i React

I den här lektionen ska vi arbeta med refs. För tydlighetens skull, låt oss analysera hur hooken useRef fungerar jämfört med hooken useState.

Låt oss skapa en komponent med en knapp:

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

Importera useState till komponenten:

import { useState } from 'react';

Och skapa ett state state:

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

Och nu gör vi så att när vi klickar på knappen ökar vårt state med 1. Vi kommer att visa state-värdet direkt i knappens text:

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

Låt oss beskriva funktionen för att hantera klick på knappen handleStateClick:

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

Låt oss klicka på knappen och se hur state-värdet växer.

Och nu låt oss skapa komponenten App, men använd inte state, utan en ref.

Först, importera useRef till komponenten:

import { useRef } from 'react';

Och skapa en ref ref. Hooken useRef returnerar som sitt resultat ett ref-objekt med en enda egenskap current, som är vad vi kommer att vara intresserade av framöver. Låt oss sätta dess initiala värde till 0:

const ref = useRef(0);

Lägg en klickhanterare på knappen. Kom ihåg att vi inte ska läsa/ändra ref i sig, utan dess egenskap current:

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

Lägg till funktionen för att hantera klick på vår knapp. Här kommer vi att öka current med 1, precis som i föregående exempel med state. Till skillnad från state, där en funktion setState krävs för att ändra dess värde, arbetar vi direkt med ref-egenskapen:

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

Låt oss nu klicka på vår knapp. Och vad ser vi? När vi klickar på den, förblir den 0 som från början och ändras inte.

Du kan naturligtvis börja tvivla på att värdet faktiskt ändras. Låt oss kolla detta. För att göra detta, lägg till ytterligare en kodrad i klickhanteraren som skriver ut värdet på current i konsolen:

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

Och nu, med konsolen öppen i webbläsaren, låt oss klicka på knappen igen och se till att värdet verkligen ändras vid varje klick och att det inte är något trick.

Nu ser vi att till skillnad från state, orsakar en förändring av ref-värdet inte en omrendering av komponenten. Därför ser vi varje gång i knappens text startvärdet 0.

Således, om dina data används för rendering, så förvara dem i state, och om du inte behöver rendering, i så fall kan användning av refs vara mer effektivt.

Låt det i din komponent finnas ett stycke med texten 'text' och en knapp. Gör så att varje gång du klickar på knappen läggs ett utropstecken till i slutet av styckets text. Gör detta med hjälp av state.

Skapa en komponent App, men istället för state använd nu en ref. Se till att när knappen trycks kommer styckets text inte att ändras. Lägg också till utskrift av styckets text i konsolen, öppna den och se till att texten faktiskt ändras.