Question

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

我正在使用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);
  }, []);

关于：

当组件卸下时，我会再次设置监听器

唯一要执行的操作是返回的函数（即() => window.removeEventListener('touchstart', onFirstTouch)）。只有重新安装组件后，它才会再次设置侦听器。

如何设置事件侦听器并使用react钩子在第一次触发事件后将其删除？

1 个答案: