如何使用 useEffect Hook 只执行一次操作？

Question

如果有人离开 window，我想制作模态弹出窗口。

我尝试了以下代码：

React.useEffect(() => {
    const popupWhenLeave = (event) => {
      if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
      ) {
        handleClickOpen();
      }
    };
    document.addEventListener("mouseleave", popupWhenLeave);

    return () => {
      document.removeEventListener("mouseleave", popupWhenLeave);
    };
  }, []);

上面的代码帮助了我，但因为它在每个时间间隔都会弹出，所以变得很烦人。 我尝试添加一个新的 state 来只运行一次代码：

const [cursorOut, setCursorOut] = useState(false);

React.useEffect(() => {
    const popupWhenLeave = (event) => {
      if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
      ) {
        handleClickOpen();
      }
    };
    if(!cursorOut) {
       document.addEventListener("mouseleave", popupWhenLeave);
       setCursorOut(true);
    }

    return () => {
      document.removeEventListener("mouseleave", popupWhenLeave);
    };
  }, []);

上面的代码也和前面的代码一样运行，即每次弹出模式时。

我尝试将依赖项添加到 useEffect [cursorOut]但现在它不会弹出模式。

当 cursor 出来然后停止时，我只需要在页面上弹出一次模态框。

PS我也尝试过不使用useEffect，但它不起作用。

Answer 1

当依赖数组为空时，您的useEffect function仅被调用一次。 但是，您的useEffect function 向页面添加了一个事件侦听器，每次事件发生时都会调用该事件侦听器。

如果你只想监听一次事件，你应该在popupWhenLeave function 中删除事件监听器，而不仅仅是在useEffect清理 function 你最后返回。

  React.useEffect(() => {
    const popupWhenLeave = (event) => {
      if (
        event.clientY <= 0 ||
        event.clientX <= 0 ||
        event.clientX >= window.innerWidth ||
        event.clientY >= window.innerHeight
      ) {
        handleClickOpen();
        document.removeEventListener("mouseleave", popupWhenLeave);
      }
    };
    document.addEventListener("mouseleave", popupWhenLeave);

    return () => {
      document.removeEventListener("mouseleave", popupWhenLeave);
    };
  }, []);

旁注：如果您的组件由于例如父组件更改而重新创建，则无论依赖数组的内容如何，都会再次调用useEffect function。