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

დავუშვათ, რომ ახლა გვსურს, რომ ფერი შეიცვალოს არა მხოლოდ ღილაკზე დაჭერისას, არამედ კლავიატურაზე Enter დაჭერისას also. ჩვეულებრივ React ცხოვრებაში გლობალურ ობიექტ window-ის მოსასმენად addEventListener-ის გამოყენება არ შეიძლება. ამისთვის ჩვენ გვაქვს ეფექტები. მოდით დავამატოთ ეს მოქმედება useEffect-ის საშუალებით.

დავწეროთ დამმუშავებელი ფუნქცია Enter-ზე დაჭერისთვის. ფერი ამ შემთხვევაში შევცვალოთ წითელზე:

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

ახლა კი მოვუსმინოთ მოვლენებს window-ზე useEffect ჰუკში:

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

თუ ჩვენ გვაქვს რაიმე დასამაგრებელი ფუნქცია, მაშინ ჩვენ ყოველთვის უნდა დავაბრუნოთ გაწმენდის კოდი useEffect-ში, რათა თავიდან ავიცილოთ პრობლემები მომავალში. ამ შემთხვევაში ჩვენ გვჭირდება addEventListener-ის დამატების შემდეგ დავაბრუნოთ მისი წაშლა:

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