reactjs - 如何在 React 中手动删除事件监听器

Question

我正在使用 react 钩子(Hook)，我想有条件地添加和删除监听器(不仅仅是在我的组件卸载的情况下)。 我的组件添加了监听器，但从未删除它。为什么会这样？

useEffect(() => {
    if (isPlaying) {
      document.addEventListener('keydown', handleKeyPress);
    }

    if (!isPlaying) {
      document.removeEventListener('keydown', handleKeyPress);
    }

    return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, []);

Answer 1

问题是我忘记重新订阅 isPlaying 属性。如果没有任何参数，useEffect 仅运行一次，然后在销毁时清除。 在上面的代码中，useEffect 的调用与 componentDidMount 中的调用相同，并且碰巧 isPlaying 属性等于 true，因此添加了 eventListener。但是，当 isPlaying 变为 false 时，useEffect 永远不会再次调用，并且显然永远不会删除事件监听器。 修复方法是将 isPlaying 作为第二个参数传递给 useEffect:

... return () => {
      document.removeEventListener('keydown', handleKeyPress);
    };
  }, [isPlaying]);