IntegrateX 是一款基于节点的自动化工作流画布，支持拖拽节点、连线并运行流程。作者在构建早期面临一个关键决策：用户保存工作流时，到底该保存什么？最直接的做法是把 React Flow 节点 JSON.stringify 后存入数据库，但这种方式埋下了隐患。
React Flow 画布上的每个节点都携带位置、尺寸、选中状态、样式、z-index 等大量渲染器状态。当工作流增长到数百个节点时，90% 以上的存储和传输字节都是客户端可以免费重建的视图状态，导致保存变慢、首字节时间膨胀、存储成本攀升。
解决方案是架构层面的：在 UI 模型和领域模型之间划出硬边界，构建一个无损、感知 schema 的序列化适配器。每个节点类型映射为紧凑结构体，只保留类型、逻辑配置、连接关系以及默认值无法推导的增量；加载时再由适配器结合 schema 重新水合完整的 React Flow 对象。往返无损，负载减少 94%，画布状态机（Zustand）完全无需感知持久化层的存在。
这 94% 的缩减换来的是即时保存与加载体验、稳定的领域 schema（使分析、版本化、服务端执行成为可能），以及 UI 自由演进——界面可以随意重新设计节点，适配器吸收变化，旧存档依然能正常加载。
这一模式适用于所有富客户端产品：文档编辑器、BI 仪表盘构建器、设计工具、带自定义视图的 CRM。如果持久化层镜像渲染层，增长到一定规模就会撞上同样的墙。排查只需一个下午：抽样一份持久化负载，标出所有客户端可重建的字段，比例通常触目惊心。
🔗 原文：点击查看