Excalidraw 组件中如何正确获取和保存画布数据

在使用 Excalidraw 这个开源白板工具时，开发者经常会遇到需要获取和保存画布数据的需求。本文将深入探讨一个典型场景：如何在 React 组件中正确获取 Excalidraw 的最新画布数据，特别是在组件卸载时保存当前状态。

问题背景

在 React 应用中集成 Excalidraw 组件时，开发者通常会遇到以下需求：

1. 初始化画布时加载预设数据
2. 在用户操作后获取最新的画布状态
3. 在组件卸载时保存当前画布数据

常见误区

许多开发者会尝试通过 excalidrawAPI 的引用来获取画布数据，特别是在 useEffect 的清理函数中。这种方法看似合理，但实际上存在几个问题：

1. API 引用滞后：excalidrawAPI 是通过回调函数设置的，可能在组件卸载时还未更新
2. 状态不同步：直接通过 API 获取的数据可能不是最新的用户操作结果
3. 异步更新问题：画布更新是异步的，API 获取的数据可能有延迟

最佳实践解决方案

Excalidraw 提供了一个更可靠的解决方案：使用 onChange 回调函数。这个方法会在每次画布内容变化时触发，确保我们总是能获取到最新的状态。

实现代码示例

const sceneData = useRef(null);

useEffect(() => {
    return () => {
        // 组件卸载时将数据存储到状态管理库中
        if (sceneData.current) {
            dispatch(setExcaliDraw({
                initData: {
                    elements: sceneData.current.elements,
                    appState: {
                        viewBackgroundColor: sceneData.current.appState.viewBackgroundColor,
                        gridSize: sceneData.current.appState.gridSize
                    }
                }
            }));
        }
    };
}, []);

<Excalidraw 
    initialData={initData}
    langCode={'zh-CN'}
    theme={platFormTheme.background === 'light' ? THEME.LIGHT : THEME.DARK}
    onChange={(elements, appState, files) => {
        sceneData.current = {
            elements,
            appState,
            files
        };
    }}
    excalidrawAPI={(api) => {
        setExcalidrawAPI(api);
    }}
/>

技术原理分析

1. 实时数据捕获：onChange 回调会在每次用户交互后立即触发，确保数据最新
2. 引用持久化：使用 useRef 存储数据，避免不必要的重新渲染
3. 组件生命周期管理：在清理函数中访问 ref 数据，确保卸载时能获取到最新状态

扩展应用场景

这种模式不仅适用于组件卸载时的数据保存，还可以应用于：

1. 自动保存功能：定期将 sceneData.current 发送到服务器
2. 撤销/重做功能的增强：基于最新状态实现自定义历史记录
3. 协同编辑场景：将变化实时同步到其他客户端

性能优化建议

1. 对于频繁更新的场景，可以考虑对 onChange 进行节流
2. 大型画布可以考虑只保存变化的部分而非完整状态
3. 使用 Web Worker 处理数据序列化和反序列化

通过这种模式，开发者可以可靠地获取和保存 Excalidraw 的画布状态，避免因 React 组件生命周期和异步更新带来的数据不一致问题。