react-flow-code-review

React Flow Code Review 是一个针对 React Flow（@xyflow/react）代码的审查技能，目标是在审查过程中发现反模式、性能问题，并推动最佳实践的落实。

用途

该技能用于审查使用 React Flow 的代码。当需要审查采用 @xyflow/react 的代码、检查常见问题时可以使用它。它把审查过程组织为按顺序完成的若干“关口”，每个步骤都有一个客观的通过条件，达到之后才进入下一步。

定位流代码：在审查范围内搜索 ReactFlow、ReactFlowProvider、useReactFlow、@xyflow/react、nodeTypes 和 edgeTypes。通过条件：得到一份简短的文件路径列表（或在搜索后明确说明“范围内没有”）。
Provider 边界：对每个 useReactFlow()（以及其他需要 Provider 的 hook），沿组件树向上追溯是否存在包围它的 ReactFlowProvider，或记录一条带 file:line 的具体不匹配。
稳定类型与 memo 表面：对每个自定义节点或边组件，记录它是否使用 memo 以及是否使用带类型的 props（如 NodeProps<...> 等）。对传入 <ReactFlow> 的每个 nodeTypes / edgeTypes 值，确认其引用是否稳定（位于模块作用域，或使用能指出依赖项的 useMemo），或用 file:line 标记其不稳定地重新创建。
带证据地报告：对将要交付的每条发现，记录文件路径与行号（或最小引用片段）。通过条件：任何严重或高严重级别的问题都不能没有该引用。
关闭检查清单：使用性能检查清单和常见错误清单；每一项要么已满足，要么不适用（附原因），要么带证据地处于未关闭状态。通过条件：没有任何一项被默默含糊处理。

在组件内部定义 nodeTypes/edgeTypes：会导致每次渲染时所有节点重新挂载。正确做法是把 nodeTypes 定义在组件外部，或在动态场景下用 useMemo 并配合可指出的依赖项。
自定义节点/边缺少 memo()：自定义组件会在每次父级更新时重新渲染。正确做法是用 memo 包裹。
内联回调未使用 useCallback：会创建新的函数引用，破坏 memoization。正确做法是用 useCallback 记忆化回调，并在需要时使用函数式 setState 形式。
在 Provider 外部使用 useReactFlow：会抛出错误（No provider）。正确做法是把使用该 hook 的组件包在 ReactFlowProvider 内。
在节点数据中存放复杂对象：引用相等检查会失败，导致不必要的更新。正确做法是使用 updateNodeData 进行针对性更新。

节点渲染：自定义节点是否包裹在 memo() 中；nodeTypes 是否定义在组件外部或被记忆化；节点内的高开销计算是否使用 useMemo；事件处理器是否使用 useCallback。

边渲染：自定义边是否包裹在 memo() 中；edgeTypes 是否定义在组件外部或被记忆化；边路径计算是否未被重复。

状态更新：是否使用 setState 的函数式形式（setNodes((nds) => ...)）；是否避免为单个属性更新而展开整个 state；数据变更是否使用 updateNodeData；添加多个节点/边时是否批量更新。

视口：是否没有在每次渲染时调用 fitView()；是否仅对初始适配使用 fitViewOptions；动画时长是否合理（小于 500ms）。

缺少容器高度：没有高度时流不会渲染，应给出明确尺寸（如 width: '100%', height: '100vh'）。

缺少 CSS 导入：需要导入 '@xyflow/react/dist/style.css' 才能获得默认样式。

交互元素忘记加 nodrag：点击按钮会拖动节点，应给按钮加上 nodrag 类。

不使用 Position 常量：应使用类型安全的常量（如 Position.Right），而不是字符串字面量。

直接修改 nodes/edges：应使用不可变更新方式（map + 展开）。

缺少泛型类型：应显式声明类型（如 type MyNode = Node<{ value: number }, 'custom'>），并在 useNodesState 上使用该类型。

Props 类型错误：应使用正确类型（如 NodeProps<MyNode>），而不是 any。

所有自定义组件是否都记忆化；nodeTypes/edgeTypes 是否定义在渲染之外；回调是否包裹在 useCallback 中；容器尺寸是否恰当；样式是否已导入；useReactFlow 是否在 Provider 内使用；交互元素是否标记了 nodrag；类型是否在全程保持一致使用。

该技能聚焦于 React Flow 代码审查，资料未提供其运行平台、安装方式、收费或价格信息。