React Flow 简介

React Flow 是一个基于 React 的轻量级库，用于构建交互式节点和边的可视化编辑器。支持自定义节点、拖拽、连线、缩放等功能，适合构建低代码平台的流程图、工作流、拓扑图等场景。

核心概念

• 节点（Nodes）：表示图中的实体，可自定义样式和交互逻辑。
• 边（Edges）：连接节点的线，支持直线、贝塞尔曲线等类型。
• 视图控制：包括缩放、平移、选中等交互功能。

安装与基础配置

npm install reactflow

jingcaizuqiubifenjishibifendashentuijian.com.cn/aaaaa

http://jingcaizuqiubifenjishibifendashentuijian.com.cn/aaaaa

基础代码结构：

import ReactFlow, { Controls } from 'reactflow';
import 'reactflow/dist/style.css';

const initialNodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: '节点1' } },
  { id: '2', position: { x: 200, y: 100 }, data: { label: '节点2' } },
];
const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

function Flow() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow nodes={initialNodes} edges={initialEdges}>
        <Controls />
      </ReactFlow>
    </div>
  );
}

自定义节点与边

通过 nodeTypes 和 edgeTypes 实现自定义渲染：

const customNode = ({ data }) => (
  <div style={{ background: '#fff', border: '1px solid #000', padding: 10 }}>
    {data.label}
  </div>
);

const nodeTypes = { customNode };

<ReactFlow nodes={nodes} edges={edges} nodeTypes={nodeTypes} />

事件处理与交互

• 节点拖拽：通过 onNodesChange 监听节点位置变化。
• 连线逻辑：使用 onConnect 处理边的创建事件。

const onNodesChange = (changes) => {
  // 更新节点状态
};
const onConnect = (connection) => {
  // 添加新边
};

<ReactFlow 
  onNodesChange={onNodesChange}
  onConnect={onConnect}
/>

保存与加载流程图

将节点和边数据转换为 JSON 存储：

const saveFlow = () => {
  const flow = { nodes, edges };
  localStorage.setItem('flow-data', JSON.stringify(flow));
};

const loadFlow = () => {
  const data = JSON.parse(localStorage.getItem('flow-data'));
  if (data) setNodes(data.nodes);
};

扩展功能

• 工具栏：集成自定义按钮（如添加节点、删除元素）。
• 撤销/重做：使用 useUndoable 等库实现历史记录管理。
• 后端集成：通过 API 将流程图数据保存到数据库。

性能优化

• 使用 React.memo 避免节点不必要的重渲染。
• 分批次加载大型流程图数据。

React Flow 的灵活性和丰富的 API 使其成为低代码平台可视化搭建的理想选择。通过组合自定义节点、事件处理和持久化功能，可以快速构建复杂的交互式编辑器。