React Material：带有鼠标侦听器的进度条

Question

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

1) 用户单击我组件中的按钮 - 我应该向页面添加 mousemove 侦听器并显示 ProgressBar。
2) 用户移动鼠标 - 我对事件进行计数，并更新我的 ProgressBar。
3) 当事件计数为 50 时，我删除了 mousemove 侦听器并隐藏了 ProgressBar。

我尝试使用 React useEffect、useState Hooks 来做到这一点，但它不会删除侦听器。我不明白，为什么。

这是我的代码：

  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}} />

看起来真的很奇怪：为什么 React 会忽略 removeEventListener。
请解释一下，我的错误在哪里。
更新：非常感谢！我以这种方式使用了 useCallback 钩子：

  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);
        }
  }
});

但是我仍然不完全理解.. 所以，当我使用带有空依赖项数组的 useCallback 时，这个函数 (updateMousePosition) 在我的组件的所有 "life" 期间将保持不变？
而在 useEffect 我删除鼠标监听器。这对我来说很神奇：为什么 useEffect 忽略没有 useCallback 的删除？

Answer 1

尝试将 React.useCallback 用于 updateMousePosition。组件中的每个更改都会创建新功能（参考）。所以 React.useEffect 删除最后一个 updateMousePosition 但不删除 handleChange.

中添加的

React Material：带有鼠标侦听器的进度条

React Material: progressBar with mouse listener

javascript

reactjs

react-material

react-hooks