Reactda reflar bilan ishlash uchun useRef huki

Ushbu darsda biz reflar bilan ishlaymiz. Aniqlik uchun keling useRef hukining ishlashini useState huki bilan solishtirib ko'ramiz.

Keling, tugmasi bo'lgan komponent yarataylik:

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

Komponentga useState ni import qilaylik:

import { useState } from 'react';

Va state holatini yarataylik:

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

Endi tugmachani bosganda bizning state imiz 1 ga oshishi uchun qilaylik. Holat qiymatini to'g'ridan-to'g'ri tugma matnida chiqaramiz:

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

Tugma bosilishini qayta ishlash uchun handleStateClick funksiyasini yozamiz:

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

Tugmachani bir necha marta bosib ko'ramiz va holat qiymati qanday oshayotganini ko'ramiz.

Endi keling App komponentini holat ishlatmasdan, balki ref ishlatib yarataylik.

Boshlash uchun, komponentga useRef ni import qilaylik:

import { useRef } from 'react';

Va ref refini yarataylik. useRef huki o'z natijasida bizni keyin qiziqtiradigan yagona current xususiyati bo'lgan ref obyektini qaytaradi. Uning boshlang'ich qiymatini 0 ga o'rnatamiz:

const ref = useRef(0);

Tugmachaga klik ishlovchisini o'rnatamiz. Eslab qoling, biz ref ning o'zini emas, balki uning current xususiyatini o'qishimiz/o'zgartirishimiz kerak:

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

Tugma bosilishini qayta ishlash uchun funksiya qo'shamiz. Bu yerda biz current ni holat bilan oldingi misolda bo'lgani kabi 1 ga oshiramiz. Holatdan farqli o'laroq, uning qiymatini o'zgartirish uchun setState funksiyasi talab qilinadi, ref xususiyati bilan biz to'g'ridan-to'g'ri ishlaymiz:

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

Endi tugmachamizni bosib ko'ramiz. Va nima ko'ramiz? Unga bosganda, boshlang'ich 0 o'zgarmay qoladi.

Albatta, qiymat umuman o'zgarayotganligiga shubha qilishni boshlashingiz mumkin. Keling, buni tekshiramiz. Buning uchun klik ishlovchi funksiyasiga current qiymatini konsolga chiqaruvchi yana bir kod qatorini qo'shamiz:

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

Endi, brauzerdagi konsolni ochib, yana tugmachani bosib ko'ramiz va har bir bosishda qiymat haqiqatan ham o'zgarayotganiga va hech qanday aldov yo'qligiga ishonch hosil qilamiz.

Endi biz ko'ramizki, holatdan farqli o'laroq, ref qiymatining o'zgarishi komponentning qayta chizilishiga (render) sabab bo'lmaydi. Shuning uchun biz har safar tugma matnida boshlang'ich 0 qiymatini ko'ramiz.

Shunday qilib, agar ma'lumotlaringiz chizish (render) uchun ishlatilsa, ularni holatda saqlang, agar sizga chizish kerak bo'lmasa, ref lardan foydalanish samaraliroq bo'lishi mumkin.

Komponentingizda 'text' matni bo'lgan abzats va tugma bo'lsin. Tugma bosilganda har safar abzats matnining oxiriga undov belgisi qo'shilishi uchun qiling. Buni holat yordamida bajaring.

App komponentini yarating, lekin endi holat o'rniga ref ishlating. Tugma bosilganda abzats matni o'zgarmasligiga ishonch hosil qiling. Shuningdek, abzats matnini konsolga chiqarishni qo'shing, konsolni oching va matn haqiqatan ham o'zgarayotganiga ishonch hosil qiling.