React Flow讲解（基本介绍）：

最新推荐文章于 2025-03-17 15:33:52 发布

YUANDyuand

最新推荐文章于 2025-03-17 15:33:52 发布

阅读量3.8k

点赞数 42

文章标签： react.js 前端前端框架

本文链接：https://blog.youkuaiyun.com/YUANDyuand/article/details/142744619

版权

介绍：

React Flow 是一个用于构建基于节点的应用程序的库，如果你玩过UE这样的游戏引擎或者comfy ui你可能就会对这个样式有比较深的印象。它不仅可以做这种节点流程，其实用来做一些界面效果也挺不错的。

特点：

开箱即用：有很多打包好的效果直接使用，比如拖动，平移，链接等。
可定制：它支持自定义的节点和连线，能很好地拓展。
快速渲染：React Flow 仅渲染已更改的节点，并确保仅显示视口中的节点。

基本术语（需了解）：

node（节点）
handles（把手,就是节点连接的连接点）
edge（连线）
connection line: 就是还未连接上时用来占位的edge
viewport：就是react flow的窗口

开始:

下载：

npm install @xyflow/react

这个库基本需要导入以下组件和样式：

import { ReactFlow } from '@xyflow/react';
import '@xyflow/react/dist/style.css';

1.创建一个节点：

节点由对象数组包含，每个对象表示一个节点，每个对象的基本内容为：

id：节点的id，用于区分节点
type：节点的类型，可以自定义复杂类型，也可没有
data：节点标签对象，标签内容会显示在节点上，可以时字符串，DOM元素等
position：节点的初始位置，包含x，y坐标

const initialNodes = [
  {
    id: '1',
    type: 'input',
    data: { label: 'Input Node' },
    position: { x: 250, y: 25 },
  },

  {
    id: '2',
    // you can also pass a React component as a label
    data: { label: <div>Default Node</div> },
    position: { x: 100, y: 125 },
  },
  {
    id: '3',
    type: 'output',
    data: { label: 'Output Node' },
    position: { x: 250, y: 250 },
  },
];

2.创建一个边（连线edge）：

边同样是对象数组，包含：

id：区分边
source：指向边的起始节点id
target：指向边的末端节点id
animated：线的动态样式

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e2-3', source: '2', target: '3', animated: true },
];

节点和边都通过useState()这个hook来管理，最后将节点和边都传到<ReactFlow />组件中实现完整效果**；**

function Flow() {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  return <ReactFlow nodes={nodes} edges={edges} fitView />;
}

添加功能：

像这样流式工作有一些基本的操做功能及实现方式包括：

选择、拖动和删除节点和边缘：onNodesChange和onEdgesChange 这两个hook
**连接节点：**连接节点主要涉及三个这个框架里的hook：addEdge, applyEdgeChanges, applyNodeChanges,以及回调useCallback()

const onNodesChange = useCallback(                  // 拖动节点
    (changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
    [setNodes],
  );
const onEdgesChange = useCallback(                  // 拖动边
    (changes) => setEdges((eds) => applyEdgeChanges(changes, eds)),
    [setEdges],
  );
const onConnect = useCallback(                      // 增加新的节点连接
    (connection) => setEdges((eds) => addEdge(connection, eds)),
    [setEdges],
  );
  
// 可以通过如下添加连接时的属性
const onConnect = useCallback(
  (connection) =>
    setEdges((eds) => addEdge({ ...connection, animated: true }, eds)),
  [setEdges],
);

节点与边的设置其实方法差不多，都是监听变化然后渲染

最后同样传入到<ReactFlow />

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    />
  );

平移和缩放：

默认为：

平移：拖动鼠标
缩放：滚动
创建选择：Shift + 拖动

这个平移和缩放和大部分的类似软件相同，可以参考官方的参数在<ReactFlow />组件中配置：

panOnDrag：默认：true

当panOnDrag为true时，用户可以通过拖动画布来平移整个画布。如果设置为false，用户不能通过拖动来移动画布。
selectionOnDrag：默认：false （自 11.4.0 起可用）

当selectionOnDrag为true时，用户可以通过拖动鼠标来选择多个节点。默认值为false，即拖动不会触发选择操作。
panOnScroll：默认：false （覆盖zoomOnScroll）

当panOnScroll为true时，用户可以通过鼠标滚轮来平移画布，而不是缩放。如果设置为false，滚轮操作将用于缩放画布。
panOnScrollSpeed：默认：0.5

调整鼠标滚轮滚动时平移画布的速度。值越大，平移的速度越快。
panOnScrollMode：默认：'free'（所有方向），'vertical'（仅垂直）或'horizontal'（仅水平）

决定通过鼠标滚轮平移画布时的方向：
- 'free'：画布可以自由地向所有方向平移。
- 'vertical'：仅允许上下方向的垂直平移。
- 'horizontal'：仅允许左右方向的水平平移。
zoomOnScroll：默认：true

当zoomOnScroll为true时，用户可以通过滚动鼠标滚轮来缩放画布。设置为false将禁用滚轮缩放操作。
zoomOnPinch：默认：true

当zoomOnPinch为true时，用户可以通过使用触摸设备的双指捏合手势来缩放画布。
zoomOnDoubleClick：默认：true

当zoomOnDoubleClick为true时，用户可以通过双击画布来进行缩放操作。
preventScrolling：默认：true （阻止浏览器滚动行为）

当preventScrolling为true时，React Flow将阻止浏览器的默认滚动行为，确保滚轮操作只影响画布而不影响浏览器的页面滚动。
zoomActivationKeyCode：默认'Meta'

当按下Meta键（通常是Mac上的Command键或Windows上的Windows键）时，可以激活缩放功能。用户可以通过同时按下这个键和滚动鼠标来缩放。
panActivationKeyCode：默认'Space'（自 11.4.0 起可用）

当按下Space键时，激活画布平移功能，允许用户通过拖动来平移画布。放开Space键后，平移功能失效。