v12 重构分析
React Flow v12 将核心抽到 @xyflow/system,包名与导入路径从 reactflow 过渡到 @xyflow/react(以官方迁移指南为准)。
1. 动机
| 动机 | 说明 |
|---|---|
| 双框架复用 | React + Svelte 共享 system |
| 边界清晰 | 纯函数与 DOM 逻辑分离 |
| 独立发版 | system 补丁不必动 React 大版本 |
2. 对使用者的变化(概念)
| 方面 | 变化 |
|---|---|
| 导入路径 | @xyflow/react、CSS 路径调整 |
| API 清理 | 废弃 props 移除(查 CHANGELOG) |
| 类型 | Node、Edge 类型更严 |
| 性能 | Renderer、store 内部优化 |
迁移以官方 Migration v12 为准。
3. 架构对比(v11 → v12)
text
v11: 逻辑多在 react 包内
v12: system(算法+交互) + react(UI+store)4. 升级注意
- 锁定
@xyflow/system与@xyflow/react兼容版本。 - 自定义边/节点 API 若有破坏性,查 CHANGELOG。
- 多实例
ReactFlowProvider行为保持,但需重新测受控同步。
5. 总结
v12 是 分层重构,不是新交互模型;读源码从 system 入手效率更高。