在画布更新时，应保持UI响应吗？

Question

因此，我有一些类似于图像编辑器的React和画布，每次拖动滑块之类的时候，画布都会更新。但是，拖拽滑块和与UI的交互通常是非常缓慢的，因为画布更新很重。是否有任何方法在后台更新它，同时保持UI响应？

我尝试使用useTransition，但我猜想它只适用于呈现组件，而不是更新画布，因为它没有帮助。

Answer 1

不要让React触发画布更新/绘制操作。

使用requestAnimationFrame循环呈现画布状态，并根据react更新画布状态。

所以，您的所有交互都存储在一些值、数组、对象中，不管您需要什么。

在每个动画帧上，您的呈现代码会查看这些数据，并(重新)绘制画布内容。