docs: update docs about usage in react

packages/site/common/react-snippet-strict.md

@@ -0,0 +1,47 @@
+```tsx
+import type { GraphOptions } from '@antv/g6';
+import { Graph as G6Graph } from '@antv/g6';
+import { useEffect, useRef } from 'react';
+
+export interface GraphProps {
+  options: GraphOptions;
+  onRender?: (graph: G6Graph) => void;
+  onDestroy?: () => void;
+}
+
+export const Graph = (props: GraphProps) => {
+  const { options, onRender, onDestroy } = props;
+  const graphRef = useRef<G6Graph>();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const graph = new G6Graph({ container: containerRef.current! });
+    graphRef.current = graph;
+
+    return () => {
+      const graph = graphRef.current;
+      if (graph) {
+        graph.destroy();
+        onDestroy?.();
+        graphRef.current = undefined;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    const graph = graphRef.current;
+
+    if (!options || !container || !graph || graph.destroyed) return;
+
+    graph.setOptions(options);
+    graph
+      .render()
+      .then(() => onRender?.(graph))
+      // eslint-disable-next-line no-console
+      .catch((error) => console.debug(error));
+  }, [options]);
+
+  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+};
+```

packages/site/common/react-snippet.md

@@ -5,7 +5,7 @@
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>
 
-```tsx
+```jsx
 import { Graph } from '@antv/g6';
 import { useEffect, useRef } from 'react';
 

packages/site/docs/manual/getting-started/integration/react.en.md

@@ -3,6 +3,14 @@ title: react
 order: 0
 ---
 
+## Non-Strict Mode
+
 Refer to the example below, you can use G6 in React, and you can also view the [Live Example](https://codesandbox.io/p/sandbox/g6-react-gpcc43) 。
 
 <embed src="@/common/react-snippet"></embed>
+
+## Strict Mode
+
+In strict mode, React will update twice, causing G6 to create and destroy the Graph instance repeatedly. You can refer to the following example to solve this problem:
+
+<embed src="@/common/react-snippet-strict"></embed>

packages/site/docs/manual/getting-started/integration/react.zh.md

@@ -3,6 +3,14 @@ title: 在 React 中使用
 order: 0
 ---
 
+## 非严格模式
+
 参考下面的示例，你可以在 React 中使用 G6，也可以查看 [在线示例](https://codesandbox.io/p/sandbox/g6-react-gpcc43) 。
 
 <embed src="@/common/react-snippet"></embed>
+
+## 严格模式
+
+在严格模式下，React 会二次更新导致 G6 重复创建 Graph 实例并销毁，可以参考如下示例解决：
+
+<embed src="@/common/react-snippet-strict"></embed>