介绍

React Flow 是一个用于构建基于节点的应用程序的库。这些可以是任何东西，从简单的静态图到数据可视化再到复杂的可视化编辑器。您可以实现自定义节点类型和边缘，它附带开箱即用的小地图和视口控件等组件。

备注

如果您希望快速入门，请查看快速入门指南，否则，让我们看看 React Flow 的主要功能。

主要特征

👌 易于使用：React Flow 已经具备了许多您想要的开箱即用的功能。拖动节点、缩放和平移、选择多个节点和边缘以及添加/删除边缘都是内置的。

🎨 可定制：React Flow 支持自定义节点类型和边类型。因为自定义节点只是 React 组件，所以您可以实现您需要的任何内容：您不会被锁定到内置节点类型。自定义边允许您向节点边添加标签、控件和定制逻辑。

⚡️ 快速渲染：React Flow 仅渲染已更改的节点，并确保仅显示视口中的节点。

🧩 内置插件：我们在 React Flow 中提供了一些开箱即用的插件：

• <Background /> 插件实现了一些基本的可定制背景图案。
• <MiniMap /> 插件在屏幕一角显示图形的小版本。
• <Controls /> 插件添加了用于缩放、居中和锁定视口的控件。
• <Panel /> 插件可以轻松地将内容放置在视口顶部。
• <NodeToolbar /> 插件允许您渲染附加到节点的工具栏。
• <NodeResizer /> 插件可以轻松地向节点添加调整大小功能。

💪 可靠：React Flow 完全用 TypeScript 编写，可以及早发现错误并轻松修复。对于其他一切，我们有一个强大的 cypress 测试套件，因此您可以放心地依赖 React Flow。

继续

现在您已经更好地了解了 React Flow 的全部内容，下一页将介绍一些您将在整个文档中重复看到的常见术语：节点、边和句柄。