useEffect дар React барои коркардиҳои глобалӣ

Фарз мекунем, ки акнун мо мехоҳем, ранг на танҳо бо клик кардан рӯи тугма, балки бо пахш кардани Enter рӯи клавиатура низ иваз шавад. Дар ҳаёти оддии React гуш кардани объекти глобалӣ window бо истифода аз addEventListener имконнопазир аст. Барои ин мо эффектҳо дорем. Биёед ин амалро бо ёрии useEffect илова кунем.

Функсияи коркардиро барои клик кардан рӯи Enter менависем. Бигзор ранги дар ин ҳолат ба сурх табдил ёбад:

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

Акнун гуш кардани ҳодисаҳоро ба 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]);

Компонент дода шудааст. Чунон кунед, ки бо клик кардан ба ҳар як ҷои саҳифа заминаи ин компонент ранги худро иваз кунад.

Истинодеро созед, ки бо пахш кардан ба он блок пайдо шавад. Чунон кунед, ки бо пахш кардан ба ҳар як ҷои равзанаи браузер блоки мо пинҳон шавад.