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

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

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

我只使用功能组件（React.FC），并在需要的地方使用钩子共享状态。

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

问题：

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

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

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

标签： konvajsreact-konvause-context

当您重新渲染组件时，它将触发内部更新react-konva。

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

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

如果您想要完全控制并且想要跳过一些反应协调器工作，您可以使用 vanillaKonva代替。react-konva但大型组件可能很难。

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