docs: add complete React strict mode example

[cat0825]

Summary

• replace the abstract React strict mode wrapper with a complete G6 + React node example
• document why Strict Mode remounts components in development and why the Graph instance must be destroyed in the effect cleanup
• keep the Chinese React integration page aligned with the English page

Fixes #7440

Checks

• pnpm install --ignore-scripts
• pnpm exec prettier --check packages/site/common/react-snippet-strict.md packages/site/docs/manual/getting-started/integration/react.en.md packages/site/docs/manual/getting-started/integration/react.zh.md
• pnpm --filter @antv/g6-site exec tsc --noEmit --allowJs false

[gemini-code-assist]

Code Review

This pull request updates the React integration documentation and its corresponding code snippet for React Strict Mode. The snippet is rewritten to show a complete, self-contained example that registers and renders a custom React node with state management, and the documentation is updated to explain React's mounting behavior in development. Feedback was provided to use graphRef.current instead of referencing the graph variable directly inside the G6Graph constructor options to avoid potential Temporal Dead Zone (TDZ) issues during initialization.

[gemini-code-assist]

Referencing graph directly inside the options object passed to new G6Graph creates a closure over a variable that is still in the Temporal Dead Zone (TDZ) during the constructor's execution. If G6's constructor or internal initialization ever eagerly evaluates node styles or components in the future, this will throw a ReferenceError: Cannot access 'graph' before initialization at runtime. Using graphRef.current instead is much safer and more robust, as graphRef is already fully initialized by useRef before the effect runs, and is guaranteed to be populated with the graph instance by the time the component is rendered.

Suggested change

	component: (data) => <SelectableNode id={data.id} selected={Boolean(data.data?.selected)} graph={graph} />,
	component: (data) => <SelectableNode id={data.id} selected={Boolean(data.data?.selected)} graph={graphRef.current!} />,

[Copilot]

Pull request overview

Replaces the abstract Graph wrapper snippet in the React Strict Mode docs with a self-contained example that registers a React node, creates the Graph inside useEffect, and destroys it in the cleanup callback. Also rewrites the surrounding prose in both English and Chinese docs to explain why Strict Mode triggers a remount and why cleanup matters.

Changes:

• Rewrite react-snippet-strict.md as a complete App example using ReactNode + register, with selection-state toggling and proper cleanup.
• Update the English Strict Mode paragraph to explain mount/unmount/remount behavior.
• Mirror the same explanation in the Chinese Strict Mode paragraph.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
packages/site/common/react-snippet-strict.md	Replaces the abstract wrapper with a full App example using ReactNode, selection state, and effect cleanup.
packages/site/docs/manual/getting-started/integration/react.en.md	Updates English prose to explain Strict Mode remounting and the need for cleanup.
packages/site/docs/manual/getting-started/integration/react.zh.md	Updates Chinese prose with the same explanation, keeping locales in sync.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.