XYFlow/ReactFlow 版本迁移与使用指南

ReactFlow 是一个流行的 React 库，用于构建交互式节点图应用程序。近期该项目经历了重大更新，从 @reactflow/core 迁移到了 @xyflow/react 包，同时文档网站也进行了更新。

包版本变更

最新版本已从原先的 @reactflow/core 变更为 @xyflow/react。开发者需要更新安装命令：

npm install @xyflow/react

文档资源

项目文档已迁移至新的专用文档站点，提供了更清晰的使用指南和API参考。文档内容涵盖了从基础用法到高级特性的全面介绍。

常见问题解决方案

移除边缘黑点问题

在节点连接线上出现的黑点实际上是默认的箭头标记。要移除这些标记，可以通过配置 edge 的 markerEnd 属性来实现：

<ReactFlow
  edges={[
    {
      id: 'edge-1',
      source: '1',
      target: '2',
      // 移除标记
      markerEnd: null
    }
  ]}
/>

或者全局设置默认样式：

const defaultEdgeOptions = {
  markerEnd: null
};

<ReactFlow defaultEdgeOptions={defaultEdgeOptions} />

迁移建议

对于现有项目从旧版本迁移到新版本，开发者需要注意以下几点：

1. 包引用需要全部更新为 @xyflow/react
2. API 基本保持兼容，但建议查阅新版本文档确认细节
3. 样式系统可能有所调整，需要检查自定义样式是否仍然适用

新版本在性能、可定制性和开发者体验方面都有显著提升，值得开发者升级使用。