React Flow 代码审查

关键反模式

1. 在组件内部定义 nodeTypes/edgeTypes

问题: 导致所有节点在每次渲染时重新挂载。

tsx
// 错误 - 每次渲染都重新创建对象
function Flow() {
const nodeTypes = { custom: CustomNode }; // 错误
return ;
}

// 正确 - 在组件外部定义
const nodeTypes = { custom: CustomNode };
function Flow() {
return ;
}

// 正确 - 动态场景使用 useMemo
function Flow() {
const nodeTypes = useMemo(() => ({ custom: CustomNode }), []);
return ;
}

2. 自定义节点/边上缺少 memo()

问题: 自定义组件在每次父组件更新时重新渲染。

tsx
// 错误 - 未使用记忆化
function CustomNode({ data }: NodeProps) {
return

// 正确 - 使用 memo 包裹
import { memo } from react;
const CustomNode = memo(function CustomNode({ data }: NodeProps) {
return

3. 未使用 useCallback 的内联回调

问题: 创建新的函数引用，破坏记忆化。

tsx
// 错误 - 内联回调
onNodesChange={(changes) => setNodes(applyNodeChanges(changes, nodes))}
/>

// 正确 - 记忆化回调
const onNodesChange = useCallback(
(changes) => setNodes((nds) => applyNodeChanges(changes, nds)),
[]
);

4. 在 Provider 外部使用 useReactFlow

tsx
// 错误 - 会抛出错误
function App() {
const { getNodes } = useReactFlow(); // 错误：没有 Provider
return ;
}

// 正确 - 在 Provider 内部使用
function FlowContent() {
const { getNodes } = useReactFlow(); // 正常工作
return ;
}

function App() {
return (



);
}

5. 在节点数据中存储复杂对象

问题: 引用相等性检查失败，导致不必要的更新。

tsx
// 错误 - 每次创建新对象引用
setNodes(nodes.map(n => ({
...n,
data: { ...n.data, config: { nested: value } } // 每次都是新对象
})));

// 正确 - 使用 updateNodeData 进行针对性更新
const { updateNodeData } = useReactFlow();
updateNodeData(nodeId, { config: { nested: value } });

性能检查清单

节点渲染

• - [ ] 自定义节点使用 memo() 包裹
• [ ] nodeTypes 在组件外部定义或使用记忆化
• [ ] 节点内的重计算使用 useMemo
• [ ] 事件处理器使用 useCallback

边渲染

• - [ ] 自定义边使用 memo() 包裹
• [ ] edgeTypes 在组件外部定义或使用记忆化
• [ ] 边的路径计算不重复

状态更新

• - [ ] 使用函数式 setState：setNodes((nds) => ...)
• [ ] 不为了单个属性更新而展开整个状态
• [ ] 仅更新数据时使用 updateNodeData
• [ ] 批量添加多个节点/边时进行批量更新

视口

• - [ ] 不在每次渲染时调用 fitView()
• [ ] 仅初始适配时使用 fitViewOptions
• [ ] 动画时长合理（< 500ms）

常见错误

缺少容器高度

tsx
// 错误 - 没有高度，流程图不会渲染

// 正确 - 明确指定尺寸

缺少 CSS 导入

tsx
// 默认样式必需
import @xyflow/react/dist/style.css;

忘记在交互元素上添加 nodrag

tsx
// 错误 - 点击按钮会拖动节点
点击

// 正确 - 阻止拖动
点击

未使用位置常量

tsx
// 错误 - 字符串字面量

// 正确 - 类型安全的常量
import { Position } from @xyflow/react;

直接修改节点/边

tsx
// 错误 - 直接修改
nodes[0].position = { x: 100, y: 100 };
setNodes(nodes);

// 正确 - 不可变更新
setNodes(nodes.map(n =>
n.id === 1 ? { ...n, position: { x: 100, y: 100 } } : n
));

TypeScript 问题

缺少泛型类型

tsx
// 错误 - 失去类型安全
const [nodes, setNodes] = useNodesState(initialNodes);

// 正确 - 明确指定类型
type MyNode = Node<{ value: number }, custom>;
const [nodes, setNodes] = useNodesState(initialNodes);

错误的 Props 类型

tsx
// 错误 - 使用错误类型
function CustomNode(props: any) { ... }

// 正确 - 正确的 props 类型
function CustomNode(props: NodeProps) { ... }

审查问题

1. 1. 所有自定义组件是否都使用了记忆化？
2. nodeTypes/edgeTypes 是否在渲染外部定义？
3. 回调是否使用 useCallback 包裹？
4. 容器尺寸是否正确设置？
5. 样式是否已导入？
6. useReactFlow 是否在 Provider 内部使用？
7. 交互元素是否标记了 nodrag？
8. 类型是否在整个代码中一致使用？