Пользовательский хук для присоединения слушателя события к элементу HTML (div), сохраненному как ref с помощью useRef? - PullRequest
Новая
       7

Пользовательский хук для присоединения слушателя события к элементу HTML (div), сохраненному как ref с помощью useRef?

0 голосов
/ 14 мая 2019

Я создаю пользовательский хук с именем useSwipe , который должен добавить обработчики событий для touchstart, touchmove и touchend в элемент HTML, который я 'm сохраняется как ref с помощью крючка useRef().И также должен выполнить обратный вызов при возникновении этих событий.

Мой компонент 

function Component() {
  const divRef = useRef(null);  // The ref for the element

  useSwipe(divRef.current,someFunction);

  function someFunction() {
    console.log('Something happened...');
  }

  return (
    <div ref={divRef}>
      Some Content
    </div>
  );
}

Custom Hook: useSwipe.js

import {useEffect, useRef} from 'react';

function useSwipe(element, callback) {

useEffect(() => {

  function onTouchStart() {
    callback();
  }
  function onTouchMove() {
    callback();
  }
  function onTouchEnd() {
    callback();
  }

  if (element !== null) {
      element.addEventListener('touchstart', onTouchStart);
      element.addEventListener('touchmove', onTouchMove);
      element.addEventListener('touchend', onTouchEnd);
  }

  return () => {
      if (element !== null) {
        console.log('useSwipe useEffect return...');
        element.removeEventListener('touchstart', onTouchStart);
        element.removeEventListener('touchmove', onTouchMove);
        element.removeEventListener('touchend', onTouchEnd);
      }
  };

});

}

export default useSwipe;

ВОПРОС

Это плохая практика добавлять и удалять прослушиватели событий при каждом рендеринге?Влияет ли это на производительность?

Я мог бы добавить element и callback в массив зависимостей для useEffect(), как показано ниже, но, поскольку обратный вызов будет меняться при каждом рендеринге (в моем случае), результат будетбыть таким же.Я буду добавлять и удалять прослушиватели при каждом рендеринге.

useEffect(()=>{},[element,callback]);

Можно ли добавить эти прослушиватели событий только один раз при монтировании и удалить их при размонтировании?Я не мог придумать способ, потому что каждый раз, когда я пытаюсь это сделать, я получаю устаревшие версии обработчиков (их нужно обновлять из-за новых callbacks, которые они получают. Поэтому я закончил воссозданием всего: обработчикии слушатели.

...