React-da ref-lar bilen işlemek üçin useRef gollary

Bu sapakda biz ref-lar bilen işleris. Görnüşlilik üçin geliň, useRef gollarynyň işini useState gollary bilen deňeşdirip göreliň.

Geliň, düwme bilen komponent döredeliň:

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

Komponente useState import edeliň:

import { useState } from 'react';

We state ýagdaýyny (state) düzeliň:

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

Indi bolsa, düwmä basylanda bizim state ýagdaýymyz 1 artýar ýaly edeliň. Ýagdaýyň bahasyny düwmäniň teksti içinde görkezeris:

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

Düwmä basylyşyny işleýän handleStateClick funksiýasyny beýan edeliň:

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

Düwmjäni basyp görüň we ýagdaýyň bahasynyň nädip artýandygyny görersiňiz.

Indi bolsa, ýagdaý (state) ulanyp däl, ref ulanyp App komponenty döredeliň.

Ilki bilen, komponente useRef import edeliň:

import { useRef } from 'react';

We ref ref düzeliň. useRef gollary öz netijesinde diňe bir current häsieti bolan ref obýektini yzyna gaýtarýar, bu häsiet bolsa biziň indiki işimiz üçin gyzykly bolar. Onuň başlangyç bahasyny 0 edeliň:

const ref = useRef(0);

Düwjämä basylyş işleýjisini baglalyň. Ýadyňyzda bolsun, biz ref-yň özüni däl-de, onuň current häsietini okamaly/üýtgetmeli:

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

Düwmä basylyşyny işleýän funksiýamyzy goşalyň. Bu ýerde biz current-y 1 artrarys, ýokarky ýagdaý mysalyndaky ýaly. Ýagdaýdan tapawutlylykda, onuň bahasyny üýtgetmek üçin setState funksiýasy gerek bolýardy, ref häsieti bilen bolsa biz göni işleýäris:

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

Indi düwmämizi basyp görüň. Näme görýäris? Oña basylanda, ilki 0 edi, indi hem üýtgemeýär.

Elbetde, bahanyň umumy üýtgeýändigine şübhelenip bilersiňiz. Geliň, muny barlalyň. Bunuň üçin basylyş işleýji funksiýasyna current bahasyny konsola çykarýan ýene bir kod setirini goşalyň:

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

Indi, brauzerde konsoly açyp, ýene düwmjä basyp görüň we her basylyşda bahanyň hakykatdanam üýtgeýändigine we hiç hili aldaw ýokdugyna göz ýetiriň.

Indi görýäris, ýagdaýdan tapawutlylykda, ref bahasynyň üýtgemesi komponentyň renderlenmesine sebäp bolmaýar. Şonuň üçin hem biz her gezek düwmäniň tekstinde başlangyç baha 0 görünýär.

Şeýlelik bilen, eger maglumatlaryňyz renderlemek üçin ulanylýan bolsa, onda olary ýagdaýda (state) saklaň, eger size renderlemek gerek bolmasa, şonda ref-lary ulanmak has netijeli bolup biler.

Komponentiňizde 'tekst' teksti bilen abzas we düwme bolsun. Her gezek düwmä basylanda abzas tekstiniň ahyryna çykyş belgisi goşulýar ýaly ediň. Muny ýagdaý (state) ulanyp ediň.

App komponenty dörediň, ýöne indi ýagdaý (state) ýerine ref ulanýň. Düwmä basylanda abzas tekstiniň üýtgemeýändigine göz ýetiriň. Abzas tekstini konsola hem çykaryň, konsoly açyp we tekstiň hakykatdanam üýtgeýändigine göz ýetiriň.