钩子

🌐 Hooks

useConnection()

useConnection 钩子在存在活动时返回当前连接 connection interaction. If no connection interaction is active, it returns null for every property. A typical use case for this hook is to colorize handles based on a certain condition (e.g. if the connection is valid or not).

useEdges()

这个钩子返回当前边的数组。使用此钩子的组件在任意边发生变化时都会重新渲染。

useEdgesState()

这个钩子使得在 ReactFlowInstance 外部管理节点和边的状态时，轻松原型化受控流程成为可能。你可以把它看作是带有额外辅助回调的 React 的 `useState` 钩子。

useHandleConnections()

这个钩子返回当前边的数组。使用此钩子的组件在任意边发生变化时都会重新渲染。

useInternalNode()

此钩子返回给定节点 ID 的 InternalNode 对象。

useKeyPress()

这个钩子让你监听特定的按键代码，并告诉你它们当前是否被按下。

useNodeConnections()

这个钩子返回一个已连接边的数组。使用此钩子的组件在任何边发生变化时都会重新渲染。

useNodeId()

你可以使用这个钩子来获取它所使用的节点的 id。如果你需要在渲染树的更深层次获取节点的 id，但又不想手动通过 props 向下传递 id，这个钩子就很有用。

useNodes()

此钩子返回当前节点的数组。使用此钩子的组件将在任何节点发生变化时重新渲染，包括节点被选中或移动时。

useNodesData()

使用此钩子，你可以订阅特定节点的节点数据更改。

useNodesInitialized()

这个钩子会告诉你流中的所有节点是否都已被测量并赋予了宽度和高度。当你向流中添加一个节点时，这个钩子会返回 false，然后一旦节点被测量，又会返回 true。

useNodesState()

这个钩子使得在 ReactFlowInstance 外部管理节点和边的状态时，轻松原型化受控流程成为可能。你可以把它看作是带有额外辅助回调的 React 的 `useState` 钩子。

useOnSelectionChange()

这个钩子允许你监听节点和边选择的变化。顾名思义，每当节点或边的选择发生变化时，你提供的回调函数都会被调用。

useOnViewportChange()

useOnViewportChange 钩子让你可以监听视口的变化，例如平移和缩放。你可以为视口变化的每个阶段提供回调：onStart、onChange 和 onEnd。

useReactFlow()

这个 hook 返回一个 ReactFlowInstance，可以用于更新节点和边、操作视口，或查询流的当前状态。

useStore()

这个 hook 可用于订阅 React Flow 组件的内部状态变化。useStore hook 是从 Zustand 状态管理库重新导出的，所以你应该查看他们的文档以获取更多细节。

useStoreApi()

在某些情况下，你可能需要直接访问 store。这个钩子返回 store 对象，可以按需用来访问状态或分发动作。

useUpdateNodeInternals()

当你以编程方式向节点添加或移除连接点，或更新节点的连接点位置时，你需要使用这个钩子让 React Flow 知道。这将更新节点的内部尺寸，并在必要时在画布上正确重新定位连接点。

useViewport()

useViewport 钩子是在组件中读取当前视口状态的一种方便方式。使用此钩子的组件将在视口发生变化时重新渲染。

Last updated on March 8, 2026