如何设置事件侦听器并在使用反应挂钩首次触发事件后将其删除？

Question

我想'设置一个事件侦听器以获取 仅 window 上的第一个 touchstart 事件。 一旦发生这种情况，我想删除该侦听器。

我正在使用 React Hooks。

问题

我想知道这是否正确，或者是否有更好的方法：

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);
  }, []);

Answer 1

我看到的主要问题是您需要在卸载时清理侦听器以防触摸永远不会发生，这样卸载后的触摸就不会尝试作用于您卸载的组件。

所以我将其更改为以下内容：

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);
  }, []);

关于：

feels that I'm going to set the listener again, when my component gets unmounted

唯一会在卸载时执行的是返回的函数（即 () => window.removeEventListener('touchstart', onFirstTouch)）。它只会在组件获得 re-mounted.

时再次设置侦听器

如何设置事件侦听器并在使用反应挂钩首次触发事件后将其删除？

How to set up an event listener and remove it after first fired event using react hooks?

reactjs

react-hooks