开发工具和调试

🌐 Devtools and Debugging

React Flow 常常看起来像一个神奇的黑箱，但实际上如果你知道去哪里查看，你可以揭示它内部状态的很多信息。在本指南中，我们将向你展示三种不同的方法来揭示你的流程的内部状态：

🌐 React Flow can often seem like a magic black box, but in reality you can reveal quite a lot about its internal state if you know where to look. In this guide we will show you three different ways to reveal the internal state of your flow:

• 一个 <ViewportLogger /> 组件，用于显示视口的当前位置和缩放级别。
• 一个 <NodeInspector /> 组件，用于显示每个节点的状态。
• 一个 <ChangeLogger />，它封装你的流的 onNodesChange 处理器，并在每次分发时记录每个变化。

虽然我们发现这些工具对于确保 React Flow 正常工作非常有用，但随着你的流程及其交互变得更加复杂，你可能也会发现它们对调试你的应用很有帮助。

🌐 While we find these tools useful for making sure React Flow is working properly, you might also find them useful for debugging your applications as your flows and their interactions become more complex.

我们鼓励你将此示例中的任意或所有组件复制到你自己的项目中，并根据你的需要进行修改：每个组件都可以独立工作！

🌐 We encourage you to copy any or all of the components from this example into your own projects and modify them to suit your needs: each component works independently!

节点检查器

🌐 Node Inspector

<NodeInspector /> 组件使用我们的 useNodes hook 来访问流程中的所有节点。通常我们不建议使用这个 hook，因为每当你的任何一个节点发生变化时，它都会触发重新渲染，但这正是它在调试时如此有用的原因！

🌐 The <NodeInspector /> component makes use of our useNodes hook to access all the nodes in the flow. Typically we discourage using this hook because it will trigger a re-render any time any of your nodes change, but that’s exactly what makes it so useful for debugging!

width 和 height 属性在 React Flow 测量节点的尺寸后会被添加到每个节点。我们将这些尺寸，以及其他信息，例如节点的 id 和类型，传递给自定义的 <NodeInfo /> 组件。

🌐 The width and height properties are added to each node by React Flow after it has measured the node’s dimensions. We pass those dimensions, as well as other information like the node’s id and type, to a custom <NodeInfo /> component.

我们使用 <ViewportPortal /> 组件来让我们将检查器渲染到 React Flow 的视口中。这意味着它的内容会随着用户平移和缩放时与流程的其余部分一起定位和变换。

🌐 We make use of the <ViewportPortal /> component to let us render the inspector into React Flow’s viewport. That means it’s content will be positioned and transformed along with the rest of the flow as the user pans and zooms.

变更日志器

🌐 Change Logger

任何源自 React Flow 本身的对你的节点和边的更改，都会通过 onNodesChange 和 onEdgesChange 回调传达给你。如果你正在使用受控流程（这意味着你自己管理节点和边），你需要将这些更改应用到你的状态中，以保持所有内容同步。

🌐 Any change to your nodes and edges that originates from React Flow itself is communicated to you through the onNodesChange and onEdgesChange callbacks. If you are working with a controlled flow (that means you’re managing the nodes and edges yourself), you need to apply those changes to your state in order to keep everything in sync.

<ChangeLogger /> 组件将你提供的 onNodesChange 处理函数封装在一个自定义函数中，该函数在每次分派更改时拦截并记录这些更改。我们可以通过使用 useStore 和 useStoreApi 钩子来访问 store，然后相应地更新 React Flow 的内部状态。这两个钩子为你提供了对 React Flow 内部状态和方法的强大访问权限。

🌐 The <ChangeLogger /> component wraps your user-provided onNodesChange handler with a custom function that intercepts and logs each change as it is dispatched. We can do this by using the useStore and useStoreApi hooks to access the store and and then update React Flow’s internal state accordingly. These two hooks give you powerful access to React Flow’s internal state and methods.

除了调试，使用 <ChangeLogger /> 还可以是了解 React Flow 如何工作以及让你思考可以在每次更改基础上构建的不同功能的好方法。

🌐 Beyond debugging, using the <ChangeLogger /> can be a great way to learn more about how React Flow works and get you thinking about the different functionality you can build on top of each change.

你可以在 API 参考中找到有关 NodeChange 和 EdgeChange 类型的文档。

🌐 You can find documentation on the NodeChange and EdgeChange types in the API reference.

视口日志器

🌐 Viewport Logger

<ViewportLogger /> 是从 React Flow 的存储中提取状态的最简单示例，如果你知道该寻找什么。视口的状态在内部存储于 transform 键下（这是我们从 d3-zoom  继承的名称）。此组件提取变换的 x、y 和 zoom 组件，并将它们渲染到 <Panel /> 组件中。

🌐 The <ViewportLogger /> is the simplest example of what state you can pull out of React Flow’s store if you know what to look for. The state of the viewport is stored internally under the transform key (a name we inherited from d3-zoom ). This component extracts the x, y, and zoom components of the transform and renders them into a <Panel /> component.

让我们知道你的想法

🌐 Let us know what you think

如上所述，如果你对如何改进开发工具有任何反馈或想法，请通过 Discord  或发送邮件至 info@xyflow.com 告诉我们。如果你使用这些想法构建自己的开发工具，我们也非常想听到你的经验！

🌐 As mentioned above, if you have any feedback or ideas on how to improve the devtools, please let us know on Discord  or via mail at info@xyflow.com. If you build your own devtools using these ideas, we’d love to hear about it!