reactjs - 如何在某些情况下删除 React hook？

Question

无法找到在转到下一页部分时删除 Hook 的方法。

我创建了一个“useMousePosition”钩子(Hook)，它跟踪鼠标位置并返回鼠标坐标绞盘，我用它来转换一些 <div/>的立场。向下滚动页面时，无需转换 <div/>所以我想删除这个 useMousePosition Hook 。

useMouseHook

function useMousePosition() {
  let [mousePosition, setMousePosition] = useState({
    x: null,
    y: null
  });


function handleMouseMove(e) {
  setMousePosition({
    x: e.pageX,
     y: e.pageY
  });
}

useEffect(() => {
  window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  return mousePosition;
}

像这样在组件中使用钩子(Hook)

let { x, y } = useMousePosition();

当用户滚动到下一页部分时，我需要删除钩子(Hook)(带有钩子(Hook)的组件不会卸载)

Answer 1

我理解这个问题的方式是，你想停止跟踪鼠标移动。

如果我的理解是正确的，您可以传递一个标志来开始/顶部跟踪鼠标移动。

此演示显示您可以打开/关闭鼠标跟踪和

您可以跟随

您可以简单地传递一个变量，您可以在 useEffect 中检查该变量。

function useMousePosition(shouldTrack = true) {
  let [mousePosition, setMousePosition] = useState({
    x: null,
    y: null
  });

  function handleMouseMove(e) {
    setMousePosition({
      x: e.pageX,
      y: e.pageY
    });
  }

  useEffect(() => {
    if (!shouldTrack) return;

    window.addEventListener("mousemove", handleMouseMove);
    return () => {
      window.removeEventListener("mousemove", handleMouseMove);
    };
  }, [shouldTrack]);

  return mousePosition;
}

function App() {
  const [useMouse, setUseMouse] = useState(true);
  let { x, y } = useMousePosition(useMouse);

  useEffect(() => {
    console.log(`x, y`, x, y);
  }, [x, y]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => setUseMouse(_ => !_)}>
        Tracking Mouse Movement is {useMouse ? "On" : "Off"}
      </button>
    </div>
  );
}

单击按钮可切换轨道状态。

对于“删除钩子(Hook)”，你不能，因为它嵌入在你的函数组件中。 您至少可以使用条件来防止“副作用”运行。

⚠ 请注意，useEffect 具有 [shouldTrack] 依赖项。