如何在Next.js/React中正确使用Pixi.js？解决热重载失效问题

问题根源 #

1. 全局Pixi实例复用：你在组件外部全局创建了app实例，热重载时React不会重新初始化这个全局变量，导致新代码无法生效
2. useEffect无触发更新条件：空依赖数组[]让useEffect仅在组件首次渲染时执行，修改内部代码后不会重新触发
3. 清理逻辑不完整：仅调用app.stop()未移除DOM元素、销毁Pixi资源，旧实例残留导致热重载异常

优化方案与代码 #

将Pixi实例移至组件内部的useRef中，完善清理逻辑，确保热重载时能完全重建Pixi环境：

import { useRef, useEffect } from "react";
import { Application, Sprite, Texture } from "pixi.js";
import bunnyImg from "../public/negx.jpg";

const Pixi = () => {
  const containerRef = useRef(null);
  const appRef = useRef(null);

  useEffect(() => {
    // 1. 组件内部初始化Pixi应用，避免全局复用
    const app = new Application({
      width: 800,
      height: 600,
      backgroundColor: 0x5bba6f,
    });
    appRef.current = app;

    // 2. 挂载Pixi视图到DOM
    if (containerRef.current) {
      containerRef.current.appendChild(app.view);
    }
    app.start();

    // 3. 创建游戏元素
    const texture = Texture.from(bunnyImg.src);
    const bunny = new Sprite(texture);
    bunny.anchor.set(0.5);
    bunny.x = 400;
    bunny.y = 300;
    bunny.width = 100;
    bunny.height = 100;
    app.stage.addChild(bunny);

    // 4. 完整清理：移除DOM+销毁实例+释放资源
    return () => {
      app.stop();
      if (containerRef.current && app.view.parentNode) {
        containerRef.current.removeChild(app.view);
      }
      app.destroy(true); // true表示销毁所有纹理资源
      appRef.current = null;
    };
  }, []);

  // 若需响应React状态/Props更新，可将对应变量加入useEffect依赖数组
  // 例如：const [bunnyX, setBunnyX] = useState(400); 依赖项加[bunnyX]

  return <div ref={containerRef} />;
};

export default Pixi;

额外建议 #

• 对于复杂游戏逻辑，可将Pixi的初始化、清理、元素更新逻辑封装为自定义Hook，提升复用性
• 开发环境下若热重载仍有异常，可暂时关闭React严格模式（next.config.js中设置reactStrictMode: false），但生产环境建议开启
• 官方维护的@pixi/react库已替代过时的@inlet/react-pixi和react-pixi-fiber，兼容React 18，可考虑直接使用

内容的提问来源于stack exchange，提问作者GeraltDieSocke