简介

¥Introduction

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

¥React Flow is a library for building node-based applications. These can be anything from simple static diagrams to data visualizations to complex visual editors. You can implement custom node types and edges and it comes with components like a minimap and viewport controls out of the box.

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

¥If you’re looking to get started quickly check out the quickstart guide, otherwise, let’s take a look at React Flow’s key features.

主要功能

¥Key Features

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

¥👌 Easy to use: React Flow already comes with many of the features you want out of the box. Dragging nodes around, zooming and panning, selecting multiple nodes and edges, and adding/removing edges are all built-in.

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

¥🎨 Customizable: React Flow supports custom node types and edge types. Because custom nodes are just React components, you can implement anything you need: you’re not locked into the built-in node types. Custom edges let you add labels, controls, and bespoke logic to node edges.

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

¥⚡️ Fast rendering: React Flow only renders nodes that have changed, and makes sure only those that are in the viewport are displayed at all.

内置插件：我们在 React Flow 中附带了一些开箱即用的插件：

¥🧩 Built-in plugins: We ship React Flow with a few plugins out of the box:

• <Background /> 插件实现了一些基本的可自定义背景图案。

  ¥The <Background /> plugin implements some basic customizable background patterns.

• <MiniMap /> 插件在屏幕角落显示图形的小版本。

  ¥The <MiniMap /> plugin displays a small version of the graph in the corner of the screen.

• <Controls /> 插件添加了用于缩放、居中和锁定视口的控件。

  ¥The <Controls /> plugin adds controls to zoom, center, and lock the viewport.

• <Panel /> 插件可轻松将内容定位在视口顶部。

  ¥The <Panel /> plugin makes it easy to position content on top of the viewport.

• <NodeToolbar /> 插件允许你渲染附加到节点的工具栏。

  ¥The <NodeToolbar /> plugin lets you render a toolbar attached to a node.

• <NodeResizer /> 插件可以轻松地为你的节点添加调整大小功能。

  ¥The <NodeResizer /> plugin makes it easy to add resize functionality to your nodes.

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

¥💪 Reliable: React Flow is entirely written in TypeScript to catch bugs early and make fixes easy. For everything else, we have a robust cypress test suite so you can depend on React Flow with confidence.

继续

¥Moving on

现在你对 React Flow 有了更好的了解，下一页将介绍一些你将在整个文档中重复看到的常用术语：节点、边缘和句柄。

¥Now that you have a better idea of what React Flow is all about, the next page will walk through some common terminology that you will see repeated throughout the documentation: nodes, edges, and handles.