React'те useEffect аркылуу глобалдык иштетүүчүлөр

Эми биз түс баскычты чыкылдатуу менен гана эмес, клавиатурадан Enter баскычына басуу менен да өзгөрүшүн каалайбыз деп коёлу. Кадимки React жашоосунда глобалдык window объектисин addEventListener колдонуп уктоо мүмкүн эмес. Бул үчүн бизде эффекттер бар. Келгиле, бул аракетти useEffect жардамы менен кошобуз.

Enter баскычына басуу үчүн иштетүүчү функция жазабыз. Бул учурда түс кызыл түскө өзгөрсүн:

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

Эми окуяларды уктоону window объектисине useEffect хугуна байланыштырабыз:

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

Эгерде бизде кандайдыр бир орнотуу функциясы бар болсо, анда ар дайым useEffect ичинде тазалоо же жазылуудан чыгаруу кодун кайтарышыбыз керек, кийинки маселелерден сактануу үчүн. Бул учурда бизге addEventListener тиркегенден кийин аны өчүрүүнү кайтаруу керек:

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

Компонент берилди. Бардык барактын каалаган жерине чыкылдаганда ушул компоненттин фон түсү өзгөргүлө.

Блок пайда болуучу шилтеме жасагыла. Браузер терезесиндеги каалаган жерге басканда биздин блок жашырылгандай кылып жасагыла.