使用 useRef (React) 为 REST API 保存画布 (Konva) 的状态是否安全答案

【问题标题】：Is it safe to use useRef (React) to save state of a canvas (Konva) for REST API使用 useRef (React) 为 REST API 保存画布 (Konva) 的状态是否安全
【发布时间】：2020-12-30 11:37:28
【问题描述】：

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

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

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

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

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

我将 Konva 用于我的画布库，其中包含阶段、图层、形状 - 最终会被保存。

感谢您的宝贵时间。

【问题讨论】：

标签： reactjs canvas konvajs react-konva

【解决方案1】：

您可以使用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 进行绘图。

【讨论】：