Die useRef-haak vir werk met refs in React

In hierdie les sal ons met refs werk. Vir duidelikheid laat ons die werking van die haak useRef in vergelyking met die haak useState ondersoek.

Kom ons skep 'n komponent met 'n knoppie:

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

Laat ons useState in die komponent invoer:

import { useState } from 'react';

En laat ons 'n toestand state skep:

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

Laat ons nou maak dat wanneer ons op die knoppie klik, ons state met 1 vermeerder. Ons sal die toestandwaarde regstreeks in die knoppieteks vertoon:

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

Kom ons beskryf die funksie om die klik op die knoppie te hanteer handleStateClick:

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

Kom ons klik op die knoppie en sien hoe die toestandwaarde groei.

Kom ons skep nou 'n App-komponent, maar deur nie 'n toestand nie, maar 'n ref te gebruik.

Eerstens, laat ons useRef in die komponent invoer:

import { useRef } from 'react';

En laat ons 'n ref ref skep. Die haak useRef gee 'n ref-voorwerp met die enkele eienskap current terug, wat ons sal interesseer in die toekoms. Laat ons die aanvanklike waarde daarvan op 0 stel:

const ref = useRef(0);

Laat ons 'n klikhanterer op die knoppie plaas. Onthou dat ons nie die ref self moet lees/verander nie, maar die eienskap current daarvan:

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

Kom ons voeg die funksie by om die klik op ons knoppie te hanteer. Hier sal ons current met 1 vermeerder, net soos in die vorige voorbeeld met toestand. In teenstelling met toestand, waar 'n funksie setState nodig is om die waarde daarvan te verander, werk ons direk met die eienskap van die ref:

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

Kom ons klik nou op ons knoppie. En wat sien ons? Wanneer ons daarop klik, bly dit soos dit oorspronklik was, 0, en dit verander nie.

Jy kan natuurlik begin twyfel of die waarde hoegenaamd verander. Kom ons toets dit. Om dit te doen, voeg ons nog 'n reël kode by in die klikhantererfunksie om die waarde van current in die konsole te vertoon:

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

En nou, deur die konsole in die blaaier oop te maak, laat ons weer op die knoppie klik en oortuig ons daarvan dat die waarde inderdaad met elke klik verander en daar is geen misleiding nie.

Nou sien ons dat, anders as by toestand, die verandering van 'n ref se waarde nie die komponent se herlewing veroorsaak nie. Daarom sien ons elke keer in die knoppieteks die aanvanklike waarde 0.

Dus, as jou data vir herlewing gebruik word, stoor dit dan in toestand, en as jy nie herlewing nodig het nie, in so 'n geval kan die gebruik van refs meer doeltreffend wees.

Laat daar in jou komponent 'n paragraaf met teks 'text' en 'n knoppie wees. Maak dat elke keer as jy op die knoppie klik 'n uitroepteken aan die einde van die paragraafteks gevoeg word. Doen dit met behulp van toestand.

Skep 'n komponent App, maar in plaas van toestand gebruik nou 'n ref. Maak seker dat die teks van die paragraaf nie sal verander wanneer die knoppie gedruk word nie. Voeg ook die vertoon van die teks van die paragraaf in die konsole by, maak dit oop en oortuig jouself dat die teks eintlik verander.