用 React Hooks 與 AntV X6 打造極速圖形互動體驗

在現代 Web 應用中，圖形化用戶界面（GUI）已經成為很多應用的核心，尤其是在流程圖、圖形編輯器、視覺化分析等領域，如何有效地渲染和管理複雜的圖形和互動成為挑戰。AntV X6 提供了一個高效、靈活的圖形引擎，能夠幫助我們快速構建功能強大的圖形應用。與此同時，React 以其宣告式的設計和元件化的開發模式在前端開發中佔據重要地位。

將 AntV X6 與 React 結合使用，能夠充分發揮兩者的優勢。然而，由於 AntV X6 操控的是原生 DOM，和 React 虛擬 DOM 機制的差異，使得這種結合在效能和狀態同步方面面臨一定的挑戰。本篇文章將詳細討論如何利用 React hooks 來管理 AntV X6 圖形應用中的狀態和生命週期，避免效能瓶頸，並實現高效的圖形互動。

1. React Hooks 與 AntV X6 的結合：基礎架構

1.1 初始化 X6 圖形容器

在 React 中，useRef 是管理與 DOM 互動的理想工具，特別是在需要直接操作 DOM 元素（如 AntV X6 渲染圖形）的情況下。useEffect 用於管理圖形初始化和清理工作，確保圖形在元件生命週期內正確地建立和銷燬。

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

const GraphComponent: FC = () => {
   const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const graph = new Graph({
      container: containerRef.current,
      width: 800,
      height: 600,
      grid: true,
      panning: true,  // 啟用圖形平移
      scroller: { enabled: true },  // 啟用縮放
    });

    // 初始化節點
    graph.addNode({
      id: 'node1',
      x: 40,
      y: 40,
      width: 100,
      height: 100,
      label: 'Node 1',
      attrs: {
        body: {
          fill: '#A4A4A4',
          stroke: '#6A6A6A',
        },
      },
    });

    return () => {
      graph.dispose(); // 元件銷燬時清理圖形資源
    };
  }, []);

  return <div ref={containerRef} style={{ border: '1px solid #ccc' }} />;
};
export default GraphComponent;

1.2 監聽和更新節點位置

React 的 useState 和 useEffect 是動態更新圖形狀態的關鍵工具。在圖形互動中，節點位置、狀態變化等需要透過 React 狀態來管理，並與 X6 的內部狀態同步。例如，我們監聽節點的拖拽事件，實時更新 React 狀態。

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

const GraphComponent: FC = () => {
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [nodePosition, setNodePosition] = useState<{ x: number; y: number }>({ x: 40, y: 40 });

  useEffect(() => {
    if (!containerRef.current) return;

    const graph = new Graph({
      container: containerRef.current,
      width: 800,
      height: 600,
      grid: true,
    });

    const node: Node = graph.addNode({
      id: 'node1',
      x: nodePosition.x,
      y: nodePosition.y,
      width: 100,
      height: 100,
      label: 'Drag me!',
    });

    node.on('change:position', () => {
      const { x, y } = node.position();
      setNodePosition({ x, y });
    });

    return () => {
      graph.dispose();
    };
  }, [nodePosition]); // 每次 nodePosition 變化時更新圖形

  return <div ref={containerRef} style={{ border: '1px solid #ccc' }} />;
};
export default GraphComponent;

2. 高階互動：最佳化拖拽與連線操作

2.1 高效的節點拖拽與狀態同步

在圖形編輯應用中，節點拖拽是一個常見的互動方式。在 React 中，每次拖拽都會觸發狀態變化，如果沒有最佳化，可能會導致元件的重新渲染，從而影響效能。

爲了最佳化拖拽效能，我們可以限制 React 狀態的更新頻率，例如透過 requestAnimationFrame 或減少更新次數，確保只有在節點位置發生顯著變化時才更新狀態。

useEffect(() => {
  if (!containerRef.current) return;

  const graph = new Graph({
    container: containerRef.current,
    width: 800,
    height: 600,
    grid: true,
  });

  const node: Node = graph.addNode({
    id: 'node1',
    x: nodePosition.x,
    y: nodePosition.y,
    width: 100,
    height: 100,
    label: 'Drag me!',
  });

  // 使用 requestAnimationFrame 限制更新頻率
  let requestId: number | null = null;
  node.on('drag', () => {
    if (requestId) cancelAnimationFrame(requestId);
    requestId = requestAnimationFrame(() => {
      const { x, y } = node.position();
      if (x !== nodePosition.x || y !== nodePosition.y) {
        setNodePosition({ x, y });
      }
    });
  });

  return () => {
    if (requestId) cancelAnimationFrame(requestId);
    graph.dispose();
  };
}, [nodePosition]); // 最佳化效能，減少更新頻率

2.2 節點連線與圖形狀態同步

在圖形應用中，節點之間的連線是核心互動之一。在 React 中，我們可以透過狀態管理來控制節點之間的連線。當節點連線發生變化時，我們更新 React 狀態，從而控制檢視更新。

import { Edge } from '@antv/x6';
const [edges, setEdges] = useState<Edge[]>([]);

useEffect(() => {
  if (!containerRef.current) return;

  const graph = new Graph({
    container: containerRef.current,
    width: 800,
    height: 600,
  });

  const nodeA: Node = graph.addNode({
    id: 'nodeA',
    x: 50,
    y: 50,
    width: 100,
    height: 100,
    label: 'A',
  });
  const nodeB: Node = graph.addNode({
    id: 'nodeB',
    x: 300,
    y: 300,
    width: 100,
    height: 100,
    label: 'B',
  });

  const edge: Edge = graph.addEdge({
    source: { cell: nodeA.id },
    target: { cell: nodeB.id },
    label: 'Edge from A to B',
  });

  // 更新連線狀態
  setEdges((prevEdges) => [...prevEdges, edge]);

  return () => {
    graph.dispose();
  };
}, [edges]); // 當 edges 狀態變化時更新圖形

3. 效能最佳化：減少 React 和 X6 的雙向繫結

由於 React 主要透過虛擬 DOM 來管理狀態變化，而 AntV X6 直接操作原生 DOM，兩者的狀態同步會引入效能開銷。爲了避免效能瓶頸，我們可以減少 React 與 X6 之間的雙向繫結，儘量將圖形的狀態管理交給 X6，只有在必要時才透過 React 狀態同步。

3.1 使用 useRef 代替 useState

在處理圖形狀態時，useRef 提供了一種避免多次更新元件的機制。我們可以透過 useRef 保持 X6 圖形的例項，而不直接使用 React 狀態，這樣可以避免不必要的重新渲染。

const graphRef = useRef<Graph | null>(null);

useEffect(() => {
  if (!containerRef.current) return;

  graphRef.current = new Graph({
    container: containerRef.current,
    width: 800,
    height: 600,
  });

  return () => {
    graphRef.current?.dispose();
  };
}, []); // 只初始化一次 X6 圖形

3.2 按需更新 React 狀態

爲了減少 React 的重新渲染次數，我們可以根據需要決定是否更新 React 狀態。例如，在使用者拖拽節點時，可以僅在節點位置變化較大時才更新狀態，從而減少更新頻率。

node.on('change:position', () => {
  const { x, y } = node.position();
  if (Math.abs(x - nodePosition.x) > 5 || Math.abs(y - nodePosition.y) > 5) {
    setNodePosition({ x, y });
  }
});

4. 總結與展望

在 React 中使用 AntV X6 進行圖形渲染和互動時，效能最佳化是關鍵。透過合理地使用 React hooks（如 useState、useRef 和 useEffect）來管理圖形元件的生命週期和狀態，可以有效提高應用的效能，避免不必要的重新渲染。同時，減少 React 和 AntV X6 之間的雙向繫結，避免過度依賴 React 狀態管理，是提升效能的有效策略。

隨著圖形編輯應用和資料視覺化需求的增加，React 與 AntV X6 的結合將繼續發揮重要作用。未來，我們可以探索更多的最佳化方法，如虛擬化技術、延遲載入等，以進一步提升應用的響應速度和使用者體驗。