Game.mount / unmount

挂载和卸载 React 组件。

函数签名


Game.mount(targetId: string, component: React.JSX.Element): void
Game.unmount(targetId: string): void

基础用法


// 挂载组件
Game.mount("panel", <ScorePanel />);
 
// 卸载组件
Game.unmount("panel");

局部组件 vs 全局组件

局部组件

局部组件在场景结束时会自动卸载，退出场景前可不用手动卸载：


Game.mount("local", <div>局部组件</div>);
// 场景结束时自动卸载

全局组件

需要注册后才能跨场景存活：


import { registerGlobalJsxComponent } from "@core/game/jsx";
 
// 定义组件
const ScorePanel = () => {
  return <div>分数面板</div>;
};
 
// 注册为全局组件
registerGlobalJsxComponent("ScorePanel", ScorePanel);
 
// 使用全局组件
Game.mount("score", <ScorePanel />);
// 跨场景存活，需手动卸载
Game.unmount("score");

响应式组件


import { useGameStore } from "@core/state";
 
const ScorePanel = () => {
  const { score, life } = useGameStore(gameState);
  return (
    <div>
      <p>分数: {score}</p>
      <p>生命: {life}</p>
    </div>
  );
};
 
Game.mount("panel", <ScorePanel />);

与 Game.use 的区别

特性	Game.mount	Game.use
返回值	无	Promise（等待返回值）
生命周期	手动卸载	自动卸载
适用场景	持久化 UI	临时输入