Как настроить прослушиватель событий и удалить его после первого запущенного события с помощью ответных ловушек? - PullRequest
Новая
       15

Как настроить прослушиватель событий и удалить его после первого запущенного события с помощью ответных ловушек?

1 голос
/ 13 мая 2019

Я хочу 'настроить прослушиватель событий для получения только первого touchstart события window. Как только это произойдет, я хочу удалить этого слушателя.

Я использую React Hooks.

ВОПРОС

IЯ хочу знать, правильно ли это, или есть лучший подход: 

useEffect(() => {
    function onFirstTouch() {
      setWindowTouch(true);
      window.removeEventListener('touchstart', onFirstTouch, false);
    }
    window.addEventListener('touchstart', onFirstTouch);
  }, []);

Это кажется правильным, но я также чувствую, что я собираюсь снова установить прослушиватель, когда мой компонент размонтируется.

ПРИМЕЧАНИЕ:

Я знаю, что мог бы сделать что-то подобное (используйте «hasTouched» ref, чтобы проверить, было ли первое событие уже запущено, и игнорировать далеесобытия), но это не совсем то же самое. 

useEffect(() => {

    function handleTouch() {
      if (hasTouched.current === true) {
        return;
      }
      hasTouched.current = true;
      setWindowTouch(true);
    }

    window.addEventListener('touchstart', handleTouch);
    return () => window.removeEventListener('touchstart', handleTouch);
  }, []);

1 Ответ

2 голосов
/ 13 мая 2019

Основная проблема, которую я вижу, заключается в том, что вам нужно очистить слушателя при размонтировании на случай, если касание никогда не произойдет, чтобы касание после размонтирования не пыталось воздействовать на ваш размонтированный компонент.

Так что я бы изменил это на следующее: 

useEffect(() => {
    function onFirstTouch() {
      // The order of these two lines shouldn't really matter, but I would
      // remove the listener before triggering a re-render via setWindowTouch
      window.removeEventListener('touchstart', onFirstTouch);
      setWindowTouch(true);
    }
    window.addEventListener('touchstart', onFirstTouch);
    return () => window.removeEventListener('touchstart', onFirstTouch);
  }, []);

Относительно:

чувствует, что я собираюсь снова установить прослушиватель, когда мой компонент отключен

Единственное, что будет выполнено при размонтировании, - это возвращаемая функция (т.е. () => window.removeEventListener('touchstart', onFirstTouch)). Он только установит слушателя снова, если компонент будет перемонтирован.

...