解决X6项目中节点拖拽无法释放的问题

问题现象分析

在使用X6图形库开发React应用时，开发者可能会遇到一个奇怪的现象：当用户点击节点进行拖拽操作时，即使鼠标按键已经抬起，节点仍然会跟随鼠标移动。只有再次点击鼠标（左键或右键）才能释放这个拖拽状态。

这种异常行为主要出现在以下场景：

1. 使用React 18.0及以上版本
2. 节点配置中包含id字段
3. 在函数式组件中实现X6画布

问题根源探究

经过深入分析，这个问题实际上与React 18引入的严格模式(Strict Mode)有关。在开发环境下，React 18的严格模式会故意执行两次组件的挂载(mount)过程，以帮助开发者发现潜在的问题。

当X6画布在useEffect中初始化时，严格模式会导致：

1. 第一次挂载时创建第一个Graph实例
2. 立即卸载并再次挂载，创建第二个Graph实例
3. 两个实例同时存在，事件监听器互相干扰

解决方案实现

要解决这个问题，关键在于确保组件卸载时正确清理Graph实例。以下是推荐的实现方式：

import React, { useEffect, useRef } from 'react';
import { Graph } from '@antv/x6';

const X6GraphComponent = () => {
  const containerRef = useRef(null);
  const graphRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      // 初始化图形实例
      const graph = new Graph({
        container: containerRef.current,
        background: {
          color: '#F2F7FA',
        },
      });
      
      // 存储实例引用
      graphRef.current = graph;
      
      // 添加节点等操作
      graph.addNode({
        id: 'node-1',
        x: 200,
        y: 240,
        width: 120,
        height: 60,
        label: 'rect',
        // 其他配置...
      });
    }

    // 清理函数：组件卸载时销毁实例
    return () => {
      if (graphRef.current) {
        graphRef.current.dispose();
        graphRef.current = null;
      }
    };
  }, []);

  return <div ref={containerRef} style={{ width: '100%', height: '500px' }} />;
};

最佳实践建议

1. 实例管理：始终使用ref来保存Graph实例，避免直接使用局部变量
2. 资源释放：在组件卸载时务必调用dispose()方法清理资源
3. 严格模式适配：开发环境下特别要注意React严格模式的影响
4. 性能优化：对于复杂场景，考虑使用useMemo优化Graph实例创建

扩展思考

这个问题实际上反映了前端开发中一个常见模式：第三方库与React生命周期管理的集成。类似的原理也适用于其他图形库(D3.js、Three.js等)或DOM操作密集的库。

理解这种集成模式可以帮助开发者：

• 避免内存泄漏
• 确保事件监听器的正确清理
• 提高应用性能
• 构建更健壮的React组件

通过正确处理X6实例的生命周期，开发者可以构建出既功能强大又稳定可靠的图形化应用。