Electrolux_blog关键设计决策
| 决策 | 原因 | 代价 |
|---|---|---|
| 抽出 @xyflow/system | React/Svelte 复用、可测 | 多一个依赖版本要对齐 |
| Zustand 管状态 | 细粒度、轻量 | 需 Provider 多实例 |
| nodes/edges 用数组 | 与 React 列表习惯一致、易序列化 | 超大图查 id 需优化 |
| Change + apply 归约 | 利于受控、撤销、协同 | API 稍啰嗦 |
| d3-zoom/drag | 成熟指针模型 | 包体积 |
| 自定义 nodeTypes 映射 | 扩展性强 | 用户需 memo |
| 受控/非受控双模式 | 融入任意数据层 | 学习成本 |
与 Redux 图数据
业务层可用 Redux 持 nodes，React Flow 受控传入；库内仍用 Zustand 做交互态与 viewport。不要两套写状态不同步。
总结
xyflow 在 表达力（自定义节点）与 性能（选择器渲染）之间用 store 切片 + system 纯函数平衡；大应用重点优化 自定义节点 与 变更批量。