useEffect-ի միջոցով գլոբալ մշակիչներ React-ում

Ենթադրենք, որ մենք այժմ ուզում ենք, որ գույնը փոխվի ոչ միայն կոճակի վրա կտտացնելու դեպքում, այլև ստեղնաշարի 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]);

Տրված է կոմպոնենտ։ Արվեցնեք, որ էջի ցանկացած տեղ կտտացնելու դեպքում այս կոմպոնենտի ֆոնը փոխի գույնը։

Ստեղծեք հղում, որի վրա սեղմելու դեպքում կհայտնվի բլոկ։ Արվեցնեք, որ դիտարկիչի պատուհանի ցանկացած տեղ սեղմելու դեպքում մեր բլոկը թաքնվի։