使用 React 拖拽口吃答案

【问题标题】：Drag stuttering with React使用 React 拖拽口吃
【发布时间】：2022-10-21 22:00:44
【问题描述】：

我正在尝试使用 React 实现一个简单的可拖动 SVG 句柄。如果我将元素拖得太快，我会得到口吃的效果。我尝试添加检查以确保元素的渲染不会超出应有的程度，并且这些检查似乎有所帮助，但仍然存在明显的口吃。有人对此有经验吗？

【问题讨论】：

您是否尝试过在 useEffect 内移动窗口侦听器事件而不是在函数本身内？值得一试。
将您的事件侦听器添加到您的 useEffect 中，如 BARNOWL 提及的那样，将防止在每次渲染时重新定义您的侦听器，请确保将您的 dragging 添加为 useEffect 的参数。（但不是 100% 肯定）。
侦听器仅在鼠标按下时添加。我没有看到我可以把你提到的 useEffect 放在哪里
我尝试在 vanilla JS 中实现，但似乎仍然结结巴巴。 stackblitz.com/edit/js-knjrbo?file=index.js

【解决方案1】：

问题是由于newX % step === 0 条件造成的。当删除条件并使用 onChange(roundNearest(newX, step)); 调用 onChange 时，round Nearest 定义为：

function roundNearest(num: number, step: number) {
  return Math.round(num / step) * step;
}

它运行平稳

【讨论】：