Skip to Content
学习教程高级使用计算流程

计算流程

¥Computing Flows

对于本指南，我们假设你已经了解 React Flow 的 核心概念 以及如何实现 自定义节点。

¥For this guide we assume that you already know about the core concepts of React Flow and how to implement custom nodes.

通常使用 React Flow，开发者通过将数据发送到其他地方（例如服务器或数据库）来处理 React Flow 之外的数据。相反，在本指南中，我们将向你展示如何直接在 React Flow 内部计算数据流。你可以使用它来根据连接的数据更新节点，或者构建完全在浏览器内运行的应用。

¥Usually with React Flow, developers handle their data outside of React Flow by sending it somewhere else, like on a server or a database. Instead, in this guide we’ll show you how to compute data flows directly inside of React Flow. You can use this for updating a node based on connected data, or for building an app that runs entirely inside the browser.

我们要构建什么？

¥What are we going to build?

在本指南结束时，你将构建一个交互式流程图，该流程图从三个单独的数字输入字段（红色、绿色和蓝色）生成一种颜色，并确定在该背景颜色上白色或黑色文本是否更易读。

¥By the end of this guide, you will build an interactive flow graph that generates a color out of three separate number input fields (red, green and blue), and determines whether white or black text would be more readable on that background color.

import { useCallback } from 'react';
import {
  ReactFlow,
  Background,
  useNodesState,
  useEdgesState,
  addEdge,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
 
import NumberInput from './NumberInput';
import ColorPreview from './ColorPreview';
import Lightness from './Lightness';
import Log from './Log';
 
const nodeTypes = {
  NumberInput,
  ColorPreview,
  Lightness,
  Log,
};
 
const initialNodes = [
  {
    type: 'NumberInput',
    id: '1',
    data: { label: 'Red', value: 255 },
    position: { x: 0, y: 0 },
  },
  {
    type: 'NumberInput',
    id: '2',
    data: { label: 'Green', value: 0 },
    position: { x: 0, y: 100 },
  },
  {
    type: 'NumberInput',
    id: '3',
    data: { label: 'Blue', value: 115 },
    position: { x: 0, y: 200 },
  },
  {
    type: 'ColorPreview',
    id: 'color',
    position: { x: 150, y: 50 },
    data: {
      label: 'Color',
      value: { r: undefined, g: undefined, b: undefined },
    },
  },
  {
    type: 'Lightness',
    id: 'lightness',
    position: { x: 350, y: 75 },
  },
  {
    id: 'log-1',
    type: 'Log',
    position: { x: 500, y: 0 },
    data: { label: 'Use black font', fontColor: 'black' },
  },
  {
    id: 'log-2',
    type: 'Log',
    position: { x: 500, y: 140 },
    data: { label: 'Use white font', fontColor: 'white' },
  },
];
 
const initialEdges = [
  {
    id: '1-color',
    source: '1',
    target: 'color',
    targetHandle: 'red',
  },
  {
    id: '2-color',
    source: '2',
    target: 'color',
    targetHandle: 'green',
  },
  {
    id: '3-color',
    source: '3',
    target: 'color',
    targetHandle: 'blue',
  },
  {
    id: 'color-lightness',
    source: 'color',
    target: 'lightness',
  },
  {
    id: 'lightness-log-1',
    source: 'lightness',
    sourceHandle: 'light',
    target: 'log-1',
  },
  {
    id: 'lightness-log-2',
    source: 'lightness',
    sourceHandle: 'dark',
    target: 'log-2',
  },
];
 
function ReactiveFlow() {
  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
  const onConnect = useCallback(
    (params) => setEdges((eds) => addEdge(params, eds)),
    [],
  );
  return (
    <ReactFlow
      nodeTypes={nodeTypes}
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      fitView
    >
      <Background />
    </ReactFlow>
  );
}
 
export default ReactiveFlow;

创建自定义节点

¥Creating custom nodes

让我们首先创建一个自定义输入节点 (NumberInput.js) 并添加它的三个实例。我们将使用受控的 <input type="number" />，并将其限制为 0 之间的整数 - onChange 事件处理程序内的 255。

¥Let’s start by creating a custom input node (NumberInput.js) and add three instances of it. We will be using a controlled <input type="number" /> and limit it to integer numbers between 0 - 255 inside the onChange event handler.

import { useCallback, useState } from 'react';
import { Handle, Position } from '@xyflow/react';
 
function NumberInput({ id, data }) {
  const [number, setNumber] = useState(0);
 
  const onChange = useCallback((evt) => {
    const cappedNumber = Math.round(
      Math.min(255, Math.max(0, evt.target.value)),
    );
    setNumber(cappedNumber);
  }, []);
 
  return (
    <div className="number-input">
      <div>{data.label}</div>
      <input
        id={`number-${id}`}
        name="number"
        type="number"
        min="0"
        max="255"
        onChange={onChange}
        className="nodrag"
        value={number}
      />
      <Handle type="source" position={Position.Right} />
    </div>
  );
}
 
export default NumberInput;

接下来，我们将添加一个新的自定义节点 (ColorPreview.js)，每个颜色通道都有一个目标句柄，背景显示结果颜色。我们可以使用 mix-blend-mode: 'difference'; 使文本颜色始终可读。

¥Next, we’ll add a new custom node (ColorPreview.js) with one target handle for each color channel and a background that displays the resulting color. We can use mix-blend-mode: 'difference'; to make the text color always readable.

每当你在单个节点上有多个相同类型的句柄时，请不要忘记为每个句柄赋予一个单独的 id！

¥Whenever you have multiple handles of the same kind on a single node, don’t forget to give each one a separate id!

让我们同时将从输入节点到颜色节点的边添加到我们的 initialEdges 数组中。

¥Let’s also add edges going from the input nodes to the color node to our initialEdges array while we are at it.

import { Handle, Position } from '@xyflow/react';
 
function ColorPreview() {
  const color = { r: 0, g: 0, b: 0 };
 
  return (
    <div
      className="node"
      style={{
        background: `rgb(${color.r}, ${color.g}, ${color.b})`,
      }}
    >
      <div>
        <Handle
          type="target"
          position={Position.Left}
          id="red"
          className="handle"
        />
        <label htmlFor="red" className="label">
          R
        </label>
      </div>
      <div>
        <Handle
          type="target"
          position={Position.Left}
          id="green"
          className="handle"
        />
        <label htmlFor="green" className="label">
          G
        </label>
      </div>
      <div>
        <Handle
          type="target"
          position={Position.Left}
          id="blue"
          className="handle"
        />
        <label htmlFor="red" className="label">
          B
        </label>
      </div>
    </div>
  );
}
 
export default ColorPreview;

计算数据

¥Computing data

我们如何将数据从输入节点获取到颜色节点？这是一个两步过程，涉及为此目的创建的两个钩子：

¥How do we get the data from the input nodes to the color node? This is a two step process that involves two hooks created for this exact purpose:

  1. 借助 updateNodeData 回调将每个数字输入值存储在节点的 data 对象内。

    ¥Store each number input value inside the node’s data object with help of the updateNodeData callback.

  2. 找出使用 useNodeConnections 连接的节点，然后使用 useNodesData 从连接的节点接收数据。

    ¥Find out which nodes are connected by using useNodeConnections and then use useNodesData for receiving the data from the connected nodes.

步骤 1:将值写入数据对象

¥Step 1: Writing values to the data object

首先，让我们在 initialNodes 数组中的 data 对象内为输入节点添加一些初始值，并将它们用作输入节点的初始状态。然后我们将从 useReactFlow 钩子中获取函数 updateNodeData，并在输入发生变化时使用它来用新值更新节点的 data 对象。

¥First let’s add some initial values for the input nodes inside the data object in our initialNodes array and use them as an initial state for the input nodes. Then we’ll grab the function updateNodeData from the useReactFlow hook and use it to update the data object of the node with a new value whenever the input changes.

默认情况下，传递给 updateNodeData 的数据将与旧数据对象合并。这使得进行部分更新变得更容易，并且在你忘记添加 {...data} 的情况下可以节省你的时间。你可以将 { replace: true } 作为选项传递以替换对象。

¥By default, the data you pass to updateNodeData will be merged with the old data object. This makes it easier to do partial updates and saves you in case you forget to add {...data}. You can pass { replace: true } as an option to replace the object instead.

import { useCallback, useState } from 'react';
import { Handle, Position, useReactFlow } from '@xyflow/react';
 
function NumberInput({ id, data }) {
  const { updateNodeData } = useReactFlow();
  const [number, setNumber] = useState(data.value);
 
  const onChange = useCallback((evt) => {
    const cappedNumber = Math.min(255, Math.max(0, evt.target.value));
    setNumber(cappedNumber);
    updateNodeData(id, { value: cappedNumber });
  }, []);
 
  return (
    <div className="number-input">
      <div>{data.label}</div>
      <input
        id={`number-${id}`}
        name="number"
        type="number"
        min="0"
        max="255"
        onChange={onChange}
        className="nodrag"
        value={number}
      />
      <Handle type="source" position={Position.Right} />
    </div>
  );
}
 
export default NumberInput;
⚠️

处理输入字段时，你不想直接使用节点 data 对象作为 UI 状态。

¥When dealing with input fields you don’t want to use a nodes data object as UI state directly.

更新数据对象会有延迟，光标可能会不规则地跳动并导致不必要的输入。

¥There is a delay in updating the data object and the cursor might jump around erratically and lead to unwanted inputs.

步骤 2:从连接的节点获取数据

¥Step 2: Getting data from connected nodes

我们首先使用 useNodeConnections 钩子确定每个节点的所有连接，然后使用 updateNodeData 获取第一个连接节点的数据。

¥We start by determining all connections for each node with the useNodeConnections hook and then fetching the data for the first connected node with updateNodeData.

请注意，每个句柄可以连接多个节点，你可能希望将连接数限制为应用内单个句柄。查看 连接限制示例 以了解如何执行此操作。

¥Note that each handle can have multiple nodes connected to it and you might want to restrict the number of connections to a single handle inside your application. Check out the connection limit example to see how to do that.

And there you go! 尝试更改输入值并实时查看颜色变化。

¥And there you go! Try changing the input values and see the color change in real time.

import {
  Handle,
  Position,
  useNodesData,
  useNodeConnections,
} from '@xyflow/react';
 
function ColorPreview() {
  const redConnections = useNodeConnections({
    handleType: 'target',
    handleId: 'red',
  });
  const redNodeData = useNodesData(redConnections?.[0].source);
 
  const greenConnections = useNodeConnections({
    handleType: 'target',
    handleId: 'green',
  });
  const greenNodeData = useNodesData(greenConnections?.[0].source);
 
  const blueConnections = useNodeConnections({
    handleType: 'target',
    handleId: 'blue',
  });
  const blueNodeData = useNodesData(blueConnections?.[0].source);
 
  const color = {
    r: blueNodeData?.data ? redNodeData.data.value : 0,
    g: greenNodeData?.data ? greenNodeData.data.value : 0,
    b: blueNodeData?.data ? blueNodeData.data.value : 0,
  };
 
  return (
    <div
      className="node"
      style={{
        background: `rgb(${color.r}, ${color.g}, ${color.b})`,
      }}
    >
      <div>
        <Handle
          type="target"
          position={Position.Left}
          id="red"
          className="handle"
        />
        <label htmlFor="red" className="label">
          R
        </label>
      </div>
      <div>
        <Handle
          type="target"
          position={Position.Left}
          id="green"
          className="handle"
        />
        <label htmlFor="green" className="label">
          G
        </label>
      </div>
      <div>
        <Handle
          type="target"
          position={Position.Left}
          id="blue"
          className="handle"
        />
        <label htmlFor="red" className="label">
          B
        </label>
      </div>
    </div>
  );
}
 
export default ColorPreview;

改进代码

¥Improving the code

首先获取连接，然后为每个句柄分别获取数据，这似乎很尴尬。对于具有多个句柄的节点，你应该考虑创建一个自定义句柄组件，以隔离连接状态和节点数据绑定。我们可以内联创建一个。

¥It might seem awkward to get the connections first, and then the data separately for each handle. For nodes with multiple handles like these, you should consider creating a custom handle component that isolates connection states and node data binding. We can create one inline.

ColorPreview.js
// {...}
function CustomHandle({ id, label, onChange }) {
  const connections = useNodeConnections({
    handleType: 'target',
    handleId: id,
  });
 
  const nodeData = useNodesData(connections?.[0].source);
 
  useEffect(() => {
    onChange(nodeData?.data ? nodeData.data.value : 0);
  }, [nodeData]);
 
  return (
    <div>
      <Handle
        type="target"
        position={Position.Left}
        id={id}
        className="handle"
      />
      <label htmlFor="red" className="label">
        {label}
      </label>
    </div>
  );
}

我们可以将颜色提升为本地状态并像这样声明每个句柄：

¥We can promote color to local state and declare each handle like this:

ColorPreview.js
// {...}
function ColorPreview() {
  const [color, setColor] = useState({ r: 0, g: 0, b: 0 });
 
  return (
    <div
      className="node"
      style={{
        background: `rgb(${color.r}, ${color.g}, ${color.b})`,
      }}
    >
      <CustomHandle
        id="red"
        label="R"
        onChange={(value) => setColor((c) => ({ ...c, r: value }))}
      />
      <CustomHandle
        id="green"
        label="G"
        onChange={(value) => setColor((c) => ({ ...c, g: value }))}
      />
      <CustomHandle
        id="blue"
        label="B"
        onChange={(value) => setColor((c) => ({ ...c, b: value }))}
      />
    </div>
  );
}
 
export default ColorPreview;

变得更加复杂

¥Getting more complex

现在我们有一个简单的示例，说明如何通过 React Flow 传输数据。如果我们想做一些更复杂的事情，比如沿途转换数据怎么办？或者甚至走不同的路径？我们也可以这样做！

¥Now we have a simple example of how to pipe data through React Flow. What if we want to do something more complex, like transforming the data along the way? Or even take different paths? We can do that too!

继续流程

¥Continuing the flow

让我们扩展我们的流程。首先向颜色节点添加输出 <Handle type="source" position={Position.Right} /> 并删除本地组件状态。

¥Let’s extend our flow. Start by adding an output <Handle type="source" position={Position.Right} /> to the color node and remove the local component state.

因为这个节点上没有输入字段，所以我们根本不需要保留本地状态。我们可以直接读取和更新节点的 data 对象。

¥Because there are no inputs fields on this node, we don’t need to keep a local state at all. We can just read and update the node’s data object directly.

接下来，我们添加一个新节点 (Lightness.js)，该节点接收颜色对象并确定它是浅色还是深色。我们可以使用 相对亮度公式  luminance = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b 来计算颜色的感知亮度（0 表示最暗，255 表示最亮）。我们可以假设所有> = 128 的内容都是浅色。

¥Next, we add a new node (Lightness.js) that takes in a color object and determines if it is either a light or dark color. We can use the relative luminance formula  luminance = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b to calculate the perceived brightness of a color (0 being the darkest and 255 being the brightest). We can assume everything >= 128 is a light color.

import { useState, useEffect } from 'react';
import {
  Handle,
  Position,
  useNodeConnections,
  useNodesData,
} from '@xyflow/react';
 
function LightnessNode() {
  const connections = useNodeConnections({ handleType: 'target' });
  const nodesData = useNodesData(connections?.[0].source);
 
  const [lightness, setLightness] = useState('dark');
 
  useEffect(() => {
    if (nodesData?.data) {
      const color = nodesData.data.value;
      setLightness(
        0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b >= 128
          ? 'light'
          : 'dark',
      );
    } else {
      setLightness('dark');
    }
  }, [nodesData]);
 
  return (
    <div
      className="lightness-node"
      style={{
        background: lightness === 'light' ? 'white' : 'black',
        color: lightness === 'light' ? 'black' : 'white',
      }}
    >
      <Handle type="target" position={Position.Left} />
      <div>
        This color is
        <p style={{ fontWeight: 'bold', fontSize: '1.2em' }}>{lightness}</p>
      </div>
    </div>
  );
}
 
export default LightnessNode;

条件分支

¥Conditional branching

如果我们想根据感知到的亮度在流程中采取不同的路径怎么办？让我们为亮度节点提供两个源句柄 light 和 dark，并通过源句柄 ID 分隔节点 data 对象。如果你有多个源句柄来区分每个源句柄的数据，则需要这样做。

¥What if we would like to take a different path in our flow based on the perceived lightness? Let’s give our lightness node two source handles light and dark and separate the node data object by source handle IDs. This is needed if you have multiple source handles to distinguish between each source handle’s data.

但这对 “采取不同的路由” 意味着什么？一种解决方案是假设连接到目标句柄的 null 或 undefined 数据被视为 “stop”。在我们的例子中，如果传入的颜色是浅色，我们可以将其写入 data.values.light，如果传入的颜色是深色，我们可以将其写入 data.values.dark，并将相应的其他值设置为 null。

¥But what does it mean to “take a different route”? One solution would be to assume that null or undefined data hooked up to a target handle is considered a “stop”. In our case we can write the incoming color into data.values.light if it’s a light color and into data.values.dark if it’s a dark color and set the respective other value to null.

不要忘记添加 flex-direction: column; 和 align-items: end; 来重新定位句柄标签。

¥Don’t forget to add flex-direction: column; and align-items: end; to reposition the handle labels.

import { useState, useEffect } from 'react';
import {
  Handle,
  Position,
  useNodeConnections,
  useNodesData,
  useReactFlow,
} from '@xyflow/react';
 
function LightnessNode({ id }) {
  const { updateNodeData } = useReactFlow();
 
  const connections = useNodeConnections({ handleType: 'target' });
  const nodesData = useNodesData(connections?.[0].source);
 
  const [lightness, setLightness] = useState('dark');
 
  useEffect(() => {
    if (nodesData?.data) {
      const color = nodesData.data.value;
      const isLight =
        0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b >= 128;
      setLightness(isLight ? 'light' : 'dark');
 
      const newNodeData = isLight
        ? { light: color, dark: null }
        : { light: null, dark: color };
      updateNodeData(id, newNodeData);
    } else {
      setLightness('dark');
      updateNodeData(id, { light: null, dark: { r: 0, g: 0, b: 0 } });
    }
  }, [nodesData, updateNodeData]);
 
  return (
    <div
      className="lightness-node"
      style={{
        background: lightness === 'light' ? 'white' : 'black',
        color: lightness === 'light' ? 'black' : 'white',
      }}
    >
      <Handle type="target" position={Position.Left} />
      <p style={{ marginRight: 10 }}>Light</p>
      <Handle
        type="source"
        id="light"
        position={Position.Right}
        style={{ top: 25 }}
      />
      <p style={{ marginRight: 10 }}>Dark</p>
      <Handle
        type="source"
        id="dark"
        position={Position.Right}
        style={{ top: 75 }}
      />
    </div>
  );
}
 
export default LightnessNode;

太酷了！现在我们只需要最后一个节点来查看它是否真的有效……我们可以创建一个显示连接数据的自定义调试节点（Log.js），我们就完成了！

¥Cool! Now we only need a last node to see if it actually works… We can create a custom debugging node (Log.js) that displays the hooked up data, and we’re done!

import { Handle, useNodeConnections, useNodesData } from '@xyflow/react';
 
function Log({ data }) {
  const connections = useNodeConnections({ handleType: 'target' });
 
  const nodeData = useNodesData(connections?.[0].source);
 
  const color = nodeData.data
    ? nodeData.data[connections?.[0].sourceHandle]
    : null;
 
  return (
    <div
      className="log-node"
      style={{
        background: color ? `rgb(${color.r}, ${color.g}, ${color.b})` : 'white',
        color: color ? data.fontColor : 'black',
      }}
    >
      {color ? data.label : 'Do nothing'}
      <Handle type="target" position="left" />
    </div>
  );
}
 
export default Log;

摘要

¥Summary

你已经学习了如何在流程中移动数据并在此过程中对其进行转换。你需要做的就是

¥You have learned how to move data through the flow and transform it along the way. All you need to do is

  1. 借助 updateNodeData 回调将数据存储在节点的 data 对象内。

    ¥store data inside the node’s data object with help of updateNodeData callback.

  2. 使用 useNodeConnections 找出连接的节点，然后使用 useNodesData 从连接的节点接收数据。

    ¥find out which nodes are connected by using useNodeConnections and then use useNodesData for receiving the data from the connected nodes.

例如，你可以通过将未定义的传入数据解释为 “stop” 来实现分支。顺便说一句，大多数具有分支的流程图通常会将节点的触发与连接到节点的实际数据分开。虚幻引擎蓝图就是一个很好的例子。

¥You can implement branching for example by interpreting incoming data that is undefined as a “stop”. As a side note, most flow graphs that also have a branching usually separate the triggering of nodes from the actual data hooked up to the nodes. Unreal Engines Blueprints are a good example for this.

离开前的最后一点说明：你应该找到一种一致的方式来构造所有节点数据，而不是像我们刚才那样混合想法。这意味着，例如，如果你开始使用按句柄 ID 拆分数据，则应该对所有节点执行此操作，无论它们是否具有多个句柄。能够在整个流程中对数据结构做出假设将使生活变得轻松很多。

¥One last note before you go: you should find a consistent way of structuring all your node data, instead of mixing ideas like we did just now. This means for example, if you start working with splitting data by handle ID you should do it for all nodes, regardless whether they have multiple handles or not. Being able to make assumptions about the structure of your data throughout your flow will make life a lot easier.

Last updated on
状态管理服务器端渲染