Javascript 反应材质：带有鼠标侦听器的progressBar

我在使用React和React Material UI组件时遇到了问题。我需要的是：

1） 用户单击我的组件中的按钮-我应该将mousemove listener添加到页面并显示ProgressBar。
2） 用户移动鼠标-我统计事件，并更新我的进度条。
3） 当事件计数为50时，我移除mousemove listener并隐藏ProgressBar

我试图用React-useEffect和useState钩子来实现这一点，但它并没有删除侦听器。我不明白，为什么。

这是我的代码：

  const [completed, setCompleted] = React.useState(0);
  const [keyGenState, setKeyGenState] = React.useState(0);

  const updateMousePosition = ev => {
    console.log("UMP");
    setCompleted(old => old + 1);
    /*I tried to check completed value here, but it always is 0 - maybe, React re-renders component on setState..
    And I decided to take useEffect hook (see below)*/
  };

  useEffect(() => {
    console.log(completed); /*Just to understand, what happens) */
    if (completed === 49) {
        return () => {
            /*When completed value is 50, this log message appears, but mouse listener still works! */
            console.log("Finish!");
            document.removeEventListener("mousemove", updateMousePosition);
            setKeyGenState(2);
          }
    }
  }, [completed]); 

  function handleChange(e) {
    switch (e.currentTarget.id) {
        /*startKeyGen - it is ID of my Button. When user clicks it, I show ProgressBar and add mousemove listener*/
        case "startKeyGen" : {
            setKeyGenState(1);
            document.addEventListener("mousemove", updateMousePosition);
            break;}
    }
  }

/*Other logics. And finally, JSX code for my ProgressBar from Material-UI*/
<LinearProgress hidden={keyGenState !== 1 } variant="determinate" value={completed} style={{marginTop: 10}} />

---

但是我还是不完全明白。。因此，当我将useCallback与空依赖项数组一起使用时，该函数（updateMousePosition）将在我的组件的所有“生命周期”中保持不变？
并且在使用中，我删除了mouseListener。这对我来说很神奇：为什么useEffect在没有useCallback的情况下忽略删除

尝试使用

React.useCallback

进行

updateMousePosition

。组件中的每次更改都会创建新功能（参考）。所以

React.useffect

remove last

updateMousePosition

但不删除添加在

handleChange

我应该如何使用它？我不明白，什么时候应该执行回调请阅读

constupdatemouseposition=React.useCallback（（）=>{setCompleted（old=>old+1）；}，[]）

我忘记了useffect dep。将

updateMousePosition

添加到dep数组<代码>[completed，updateMousePosition]那么，当我们将依赖项添加到useEffect中时，它将仅在完成更改和updateMousePosition更改时调用？并且updateMousePosition不会更改（感谢useCallback），所以useEffect将仅在完成更改时调用？完全正确。只有在这种情况下才会调用useEffect。提供在线演示可能有助于其他人快速了解您面临的问题

  const updateMousePosition = React.useCallback(
(ev) => {
      //console.log("Calback");
      console.log(ev.clientX);
      setCompleted(old => old + 1);
    },
  [],
);
useEffect(() => {
  //console.log(completed); /*Just to understand, what happens) */
  if (completed === 49) {
      return () => {
        /*When completed value is 50, this log message appears, but mouse listener still works! */
          console.log("Finish!");
          document.removeEventListener("mousemove", updateMousePosition);
          setKeyGenState(2);
        }
  }
});