fix: select examples new graph load twice (#5024)

Co-authored-by: 彭硕 <justshuo@foxmail.com>

Author: peng-shuo

examples/src/pages/plugins/selection/index.tsx

@@ -1,13 +1,16 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import { Graph, Keyboard, Selection } from '@antv/x6'
 import '../../index.less'
 
-export class SelectionExample extends React.Component {
-  private container!: HTMLDivElement
+export const SelectionExample: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const graphRef = useRef<Graph | null>(null)
+
+  useEffect(() => {
+    if (!containerRef.current) return
 
-  componentDidMount() {
     const graph = new Graph({
-      container: this.container,
+      container: containerRef.current,
       width: 1200,
       height: 800,
       grid: true,
@@ -27,6 +30,8 @@ export class SelectionExample extends React.Component {
     graph.use(keyboard)
     graph.use(selection)
 
+    graphRef.current = graph
+
     // 生成500个节点
     const nodes = []
     const nodeWidth = 80
@@ -139,17 +144,16 @@ export class SelectionExample extends React.Component {
       const selectedCells = selection.getSelectedCells()
       graph.removeCells(selectedCells)
     })
-  }
-
-  refContainer = (container: HTMLDivElement) => {
-    this.container = container
-  }
-
-  render() {
-    return (
-      <div className="x6-graph-wrap">
-        <div ref={this.refContainer} className="x6-graph" />
-      </div>
-    )
-  }
+
+    return () => {
+      graph.dispose()
+      graphRef.current = null
+    }
+  }, [])
+
+  return (
+    <div className="x6-graph-wrap">
+      <div ref={containerRef} className="x6-graph" />
+    </div>
+  )
 }