reactjs - onMouseMove + useState 在自定义轮播上滞后

Question

我是新手，我在使用 onMouseMove 事件渲染 useState 时遇到了一些问题。

我正在构建一个自定义轮播作为培训，并且我有以下代码：

import { ReactNode, useState } from "react";

interface CarouselProps {
  children: ReactNode;
}

const Carousel = ({
  children,
}: CarouselProps): JSX.Element => {

  const [isMouseLocked, setIsMouseLocked] = useState(false);
  const [position, setPosition] = useState(0);
  const [initialPosition, setInicialPosition] = useState(0);
  const [lastPosition, setLastPosition] = useState(0);

  function handleMouseDown(event: React.MouseEvent): void {
    event.preventDefault();
    setIsMouseLocked(true);
    setInicialPosition(event.clientX);
  }

  function handleMouseMove(event: React.MouseEvent): void {
    if (isMouseLocked) {
      const travelDistance = event.clientX - initialPosition;
      setPosition(travelDistance + lastPosition);
    }
  }

  function handleMouseUp(event: React.MouseEvent): void {
    event.preventDefault();
    setLastPosition(position);
    setIsMouseLocked(false);
  }

  return (
    <div
      className="carousel"
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      <div
        style={{ transform: `translateX(${position * 2}px)` }}
      >
        {children}
      </div>
    </div>
  );
};

export default Carousel;

交互工作正常，我遇到的问题是因为我使用 useState 和 onMouseMove 来跟踪样式 translateX 上使用的位置，组件渲染很多并导致延迟。我尝试使用 let 而不是 state，但是组件根本不动。有没有办法避免大量渲染或至少消除这种情况下的滞后，并且仍然进行 translateX 更新以便轮播移动？

标签： reactjsreact-hooks