在 React 中添加和删除事件监听器是反模式吗？

Question

考虑这个片段，

useEffect(() => {
        document.addEventListener('mousedown', checkAndCloseMenu);
        return () => document.removeEventListener('mousedown', checkAndCloseMenu);
 }, []);

我在高阶下拉组件中使用此 useEffect，我见过很少专业人士使用此类添加和删除事件侦听器。使用这些事件监听器是反模式吗？如果是，正确的方法是什么。

Answer 1

添加和删​​除事件侦听器不被视为反模式。

useEffect(() => {
  document.addEventListener('mousedown', checkAndCloseMenu);
  return () => document.removeEventListener('mousedown', checkAndCloseMenu);
 }, []);

无论何时何地，最好使用 React ref 来访问底层 DOMNode：

const ref = React.useRef();

useEffect(() => {
  const node = ref.current;

  node.addEventListener('mousedown', checkAndCloseMenu);
  return () => node.removeEventListener('mousedown', checkAndCloseMenu);
 }, []);

 ...

 <div ref={ref}> ..... </div>

或者直接附加监听器

<div onMouseDown={checkAndCloseMenu}> ..... </div>

但有时，当您需要监听来自对象/节点的事件时，这是不可避免window的document。

被认为是反模式的是直接改变全局事件监听器。

document.onmousedown = checkAndCloseMenu;

这样做不仅会改变全局对象，还会替换其中的任何现有值。不要像这样进行事件处理。