Reactda useEffect orqali global ishlovchilar

Faraz qilaylik, endi biz rang faqat tugmacha bosilganda emas, balki klaviaturaning Enter tugmasi bosilganda ham o'zgarishini istaymiz. Oddiy React hayotida window global ob'ektiga addEventListener yordamida eshitish mumkin emas. Buning uchun bizda effektlar mavjud. Keling buni useEffect yordamida qo'shaylik.

Enter bosilganda ishlaydigan funktsiyani yozamiz. Rang bu holatda qizil rangga o'zgarsin:

function handleEnter(event) {
	if (event.keyCode === 13) {
		setColor('red');
	}
}

Endi eshitishni window ob'ektiga useEffect hookida bog'laymiz:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
}, [color]);

Agar bizda qandaydir sozlash funktsiyasi bo'lsa, unda har doim useEffect ichida tozalash yoki obunani bekor qilish kodini qaytarishimiz kerak, keyinchalik muammolarning oldini olish uchun. Bu holatda biz addEventListener ni biriktirgandan so'ng uni o'chirishni qaytarishimiz kerak:

useEffect(() => {
	document.body.style.color = color;
	
	window.addEventListener('keydown', handleEnter);
	
	return () => {
		window.removeEventListener('keydown', handleEnter);
	};
}, [color]);

Komponent berilgan. Sahifaning istalgan joyiga bosilganda ushbu komponent fon rangi o'zgaradigan qiling.

Blok paydo bo'ladigan havola yarating. Brauzer oynasining istalgan joyiga bosilganda bizning blokimiz yashirinadigan qiling.