გლობალური დამმუშავებლები useEffect-ის საშუალებით React-ში

დავუშვათ, რომ ახლა გვსურს, რომ ფერი შეიცვალოს არა მხოლოდ ღილაკზე დაჭერისას, არამედ კლავიატურაზე Enter დაჭერისას also. ჩვეულებრივ 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]);

მოცემულია კომპონენტი. გახადეთ ისე, რომ გვერდის ნებისმიერ ადგილას დაწკაპუნებისას ამ კომპონენტის ფონის ფერი შეიცვალოს.

გააკეთეთ ბმული, რომლის დაჭერისას გამოჩნდეს ბლოკი. გახადეთ ისე, რომ ბრაუზერის ფანჯარაში ნებისმიერ ადგილას დაწკაპუნებისას ჩვენი ბლოკი დაიმალოს.