同时拖动/移动对象的最有效方法是什么？

Question

这更像是一个通用的设计问题，而不是关于一段代码的具体问题。让我做一个大纲：

想象一个画布，上面有一条由 3 个或更多点组成的折线。这些点中的每一个都有一个圆形对象作为可拖动手柄。用户可以移动拖动手柄，该操作会更新仅包含这 3 个坐标的反应上下文。新的上下文会触发画布的重绘，使用新坐标更新折线和拖动手柄，同时在拖动发生时执行“对齐轴”和“对齐到最近的其他矢量”检查。

我只使用功能组件 (React.FC)，并且在需要时使用钩子共享状态。

我在拖动处理程序上使用 requestAnimationFrame() 来消除更新，使其尽可能接近客户端的最大刷新率。目标是保持在 60fps。

问题：

是否重新渲染附加到 react-konva 中的舞台的组件总是会触发实际画布上所有内容的重绘，还是 react-konva 会跟踪？

在这种情况下是否建议使用 vanilla Konva 而不是 react-konva 抽象，以避免过度重绘，同时仅在拖动操作结束后使用 react 上下文来保持状态？

有没有更有效的方法来处理我目前不知道的这个用例？

Answer 1

当你重新渲染一个组件时，它会在react-konva 内部触发一个内部更新。

react-konva 将更新 Konva 节点的 props。它正在努力工作，因此如果您重新渲染了一个组件，但没有更改任何道具 - Konva 节点将不会更新（并且不会绘制画布）。

道具的任何变化都会触发图层（或舞台）重绘。

如果您想要完全控制并且想要跳过一些 Reconciler 工作，您可以使用 vanilla Konva 而不是 react-konva。但大型组件可能很难。

另外，最好避免使用React.Context 进行频繁更新。更新上下文可能会触发大量组件的重新渲染。所以最好使用普通状态（甚至mobx）来加快更新速度。