使用useRefReact为REST API保存画布Konva的状态是否安全？

问题描述

我正在构建一个小的React应用程序，目的是

能够在画布上移动形状
保存画布的状态
使用REST API从状态上传/加载

到目前为止，我的应用程序允许我在画布上移动形状，然后使用React的useRef保存画布的状态，然后保存stageRef的值：

const stageRef = useRef();
...
<Stage width={500} height={500} ref={stageRef}>
   ...(Layers and shapes)
</Stage>

此方法有效（就保存状态而言），但我不确定使用useRef是处理保存状态的不安全方法，并且还有更好的方法。

我正在将Konva用于我的画布库，其中包含舞台，图层和形状-最终会被保存。

感谢您的时间。

解决方法

您可以使用ref来访问任何Konva节点。您可以使用Konva方法将JSON保存在某处。它将正常工作：

const stageRef = useRef();

const handleSave = () => {
   const json = stageRef.current.toJSON();
}

<Stage width={500} height={500} ref={stageRef}>
   ...(Layers and shapes)
</Stage>

但我不建议您使用它。

您的问题与undo/redo react-konva demo和JSON saving best practices from Konva有关。

在使用react和react-konva时，最好避免使用Konva内部构件。

您必须具有自己的应用程序状态。它可以是简单的反应状态，也可以是外部库，例如mobx或redux或其他任何东西。

只需将该状态保存到后端：

const [shapes,setShapes] = React.useState([]);

const handleSave = () => {
   const json = JSON.stringify(shapes);
}

<Stage width={500} height={500} ref={stageRef}>
   ...(Layers and shapes drawn from the state)
</Stage>

为什么最好使用应用程序的状态而不是Konva的JSON？

stage.toJSON()的结构可能会随时间而变化。这是Konva保存和加载状态的内部格式。
stage.toJSON()可能包含一些噪声信息，这些噪声信息使JSON变得更大。例如，对于每个形状，它将具有fill属性。但是在您的应用中，保存该属性可能没有意义，因为您所有的形状始终都是红色的。
您的数据和节约应该与框架无关。以防万一，您将决定使用其他东西来代替Konva。

konvajs react-konva reactjs reactjs