在这部分文档中，我们将解释一些基本的 React Flow 术语和定义。React Flow 中会经常用到的三个东西是节点、边和连接桩。

节点（Nodes）

React Flow 中的节点是一个 React 组件。 这意味着它可以呈现任何你喜欢的内容。 每个节点都有一个 x 坐标和 y 坐标，这两个坐标可以告诉它在视口中的位置。 默认情况下，节点的外观如上例所示。 你可以在 节点选项 文档中找到自定义节点的所有选项。

自定义节点（Custom Node）

这就是 React Flow 的神奇之处。你可以根据自己的喜好自定义节点的外观和行为。你可能创建的许多功能都不是 React Flow 内置的。你可以使用自定义节点完成以下工作：

• 渲染表单元素
• 可视化数据
• 支持多个连接桩

有关详细信息，请参阅自定义节点文档。

连接桩（Handles）

连接桩（在其他库中也称为 "端口"）是边连接到节点的位置。连接桩可以放置在任何地方，样式也可以随心所欲。它只是一个 div 元素。 默认情况下，它以灰色圆圈的形式出现在节点的顶部、底部、左侧或右侧。创建自定义节点时，可以根据需要在节点中添加任意数量的连接桩。更多信息请参阅连接桩文档。

边（Edges）

边连接两个节点。每条边都需要一个目标节点和一个源节点。 React Flow 内置了四种边缘类型：default（贝塞尔）、smoothstep、step 和 straight。边是一个 SVG 路径，可使用 CSS 进行样式设置，并且完全可自定义。如果使用多个连接桩，可以分别引用它们，为一个节点创建多个连接。

自定义边（Custom Edges）

与自定义节点一样，你也可以自定义边。用户可以使用自定义边做以下事情：

• 添加一个按钮来移除边
• 自定义路由行为
• 无法仅用一个 SVG 路径来解决的复杂的样式或交互

你可以在自定义边 api 找到更多信息。

连接线

React Flow 内置了从一个连接桩点击并拖动到另一个连接桩以创建新边的功能。拖动时，占位边称为连接线。连接线内置四种类型，并且可以自定义。你可以在props 部分 找到配置连接线的 props。

视口（Viewport）

React Flow 的所有内容都存在于视口中。视口有 x、y 和 zoom。拖动窗格时，可以改变 x 和 y 坐标；放大或缩小时，可以改变 zoom 级别。