Как убрать крючок React в определенных условиях?

Question

Не удается найти способ удалить хук при переходе к следующему разделу страницы.

Я создал хук «useMousePosition», который отслеживает положение мыши и возвращает координаты мыши, которые я использую для преобразования позиции <div/>. При прокрутке вниз страницы нет необходимости преобразовывать <div/>, поэтому я хочу удалить этот хук useMousePosition.

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

Использовать хук в таком компоненте как

let { x, y } = useMousePosition();

Мне нужно убрать хук, когда пользователь прокрутил раздел следующей страницы (компонент с хуком не размонтируется)

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

Нажатие на кнопку переключает статус дорожки.

А для «снятия крючка» вы не можете, так как он встроен в ваш функциональный компонент.Вы можете по крайней мере предотвратить запуск «побочного эффекта», используя условие.

⚠ Обратите внимание, что useEffect имеет зависимость как [shouldTrack].

Answer 2

Необходимо указать условия в handleMouseMove

. В следующем решении вы остановите рендеринг за розовой границей и удалите слушателя под черной линией.

Примечание:добавлены useCallback и dep array из-за ненужных визуализаций.

const isInsideBox = ({ pageX, pageY }) =>
  LEFT <= pageX && pageX <= RIGHT && TOP <= pageY;

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

  const handleMouseMove = useCallback(
    e => {
      isInsideBox(e) &&                     // Add Condition for Border
        setMousePosition({
          x: e.pageX,
          y: e.pageY
        });

      e.pageY >= BOTTOM &&                  // Add Condition for Black Line
        window.removeEventListener("mousemove", handleMouseMove);
    },
    [setMousePosition]
  );

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

  return mousePosition;
}