javascript - react useEffect 和 mousedown 监听器

Question

我有一个模式，如果用户点击在它外面，它会关闭。

方法一 - 传递 isModalOpened 因此仅当 isModalOpened 为真时状态才会在点击时更新。

const [isModalOpened, toggleModal] = useState(false);
const ref = useRef(null);

const clickOut = (e) => {
  if (!ref.current.contains(e.target) && isModalOpened) {
     toggleModal(false);
  }
};

React.useEffect(() => {
  window.addEventListener('mousedown', clickOut);

  return () => {
     window.removeEventListener('mousedown', clickOut);
  };
}, [isModalOpened]);

方法二 - 从 dep 数组中删除 isModalOpened。

const [isModalOpened, toggleModal] = useState(false);
const ref = useRef(null);

const clickOut = (e) => {
  if (!ref.current.contains(e.target)) {
     toggleModal(false);
  }
};

React.useEffect(() => {
  window.addEventListener('mousedown', clickOut);

  return () => {
     window.removeEventListener('mousedown', clickOut);
  };
}, []);

问题:我应该将 isModalOpened 传递给 dep 数组吗？

Answer 1

你不需要它。

原因是，如果您将 toggleModal 设置为相同的 false 值，则不会导致重新渲染。

因此您无需防范 isModalOpened 的值，这会导致您的函数中不包含该变量，从而导致根本不需要依赖项。