快速掌握ReactFlow画流程图
学习目标
- 理解并掌握 快速掌握ReactFlow画流程图 的核心原理与工程实践
总结
这节我们学会了基于 React Flow 画流程图。
它有很多有价值的应用，比如 AI 工具的工作流编辑、低代码的逻辑编排等。
但它学起来并不难，核心就是 node（节点） 和 edge（边）。
对应三个事件： nodesChange（节点变化）、edgesChange（边变化）、connect（连接节点和节点）
每个节点可以通过 type 指定绘制用的组件，我们可以自定义节点的内容，通过 data 指定传给组件的参数。
然后通过 nodeTypes 来指定 type 和组件的映射。
同样，边也可以自定义，通过 edgeTypes 来指定映射。
在自定义 node 里，通过 Handle 来声明黑点位置。
在自定义 edge 里，通过 BaseEdge 来画线，通过 EdgeLabelRenderer 来画其他内容。
画边的时候计算贝塞尔曲线的路径、直线的路径用 reactflow 提供的 hook 就行。
此外，还可以通过 Controls、MiniMap、Background 来实现控制条、缩略图、背景等功能。通过 Panel 组件在画布上放置一些按钮之类的。
学完了这个案例，React Flow 就算入门了。