Javascript 如何完全删除Pixi渲染器、舞台和资源？

我正在尝试使用React装载/卸载Pixi阶段（我还不想使用React Pixi）

重新装入组件时出现错误：

Uncaught Error: Resource with name "cupCake.png" already exists
i.add.i.enqueueapp.js
componentDidMountmodules.js
_assign.notifyAllmodules.js
ON_DOM_READY_QUEUEING.closemodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
Mixin.performmodules.js
_assign.performmodules.js
flushBatchedUpdatesmodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
ReactDefaultBatchingStrategy.batchedUpdatesmodules.js
batchedUpdatesmodules.js
ReactEventListener.dispatchEvent

class MapOverlay extends React.Component{

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderer = PIXI.autoDetectRenderer(256, 256, {transparent: true});
    this.refs.gameCanvas.appendChild(this.renderer.view);

    // create the root of the scene graph
    this.stage = new PIXI.Container();
    this.stage.width = 1366;
    this.stage.height = 768;

    PIXI.loader
      .add("cupCake.png")
      .load(()=> {

        //Create the `cat` sprite from the texture
        var cat = new PIXI.Sprite(
          PIXI.loader.resources["cupCake.png"].texture
        );

        //Add the cat to the stage
        this.stage.addChild(cat);

        //Render the stage
        this.renderer.render(this.stage);
      });
  }

  componentWillUnmount() {
    this.refs.gameCanvas.removeChild(this.renderer.view);
    PIXI.TextureCache['cupCake.png'].destroy(true);
  }

  render() {
    return (
      <div className="game-canvas-container" ref="gameCanvas"></div>
    );
  }
}

我尝试使用：

PIXI.TextureCache['cupCake.png'].destroy（true）但错误仍然存在

以下是我的组件：

Uncaught Error: Resource with name "cupCake.png" already exists
i.add.i.enqueueapp.js
componentDidMountmodules.js
_assign.notifyAllmodules.js
ON_DOM_READY_QUEUEING.closemodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
Mixin.performmodules.js
_assign.performmodules.js
flushBatchedUpdatesmodules.js
Mixin.closeAllmodules.js
Mixin.performmodules.js
ReactDefaultBatchingStrategy.batchedUpdatesmodules.js
batchedUpdatesmodules.js
ReactEventListener.dispatchEvent

class MapOverlay extends React.Component{

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.renderer = PIXI.autoDetectRenderer(256, 256, {transparent: true});
    this.refs.gameCanvas.appendChild(this.renderer.view);

    // create the root of the scene graph
    this.stage = new PIXI.Container();
    this.stage.width = 1366;
    this.stage.height = 768;

    PIXI.loader
      .add("cupCake.png")
      .load(()=> {

        //Create the `cat` sprite from the texture
        var cat = new PIXI.Sprite(
          PIXI.loader.resources["cupCake.png"].texture
        );

        //Add the cat to the stage
        this.stage.addChild(cat);

        //Render the stage
        this.renderer.render(this.stage);
      });
  }

  componentWillUnmount() {
    this.refs.gameCanvas.removeChild(this.renderer.view);
    PIXI.TextureCache['cupCake.png'].destroy(true);
  }

  render() {
    return (
      <div className="game-canvas-container" ref="gameCanvas"></div>
    );
  }
}

类MapOverlay扩展了React.Component{
建造师（道具）{
超级（道具）；
}
componentDidMount（）{
this.renderer=PIXI.autoDetectRenderer（256,256，{transparent:true}）；
this.refs.gameCanvas.appendChild（this.renderer.view）；
//创建场景图的根
this.stage=new PIXI.Container（）；
此.stage.width=1366；
此.stage.height=768；
皮希装载机
.add（“cupCake.png”）
.load（（）=>{
//从纹理创建“猫”精灵
var cat=新的PIXI.Sprite(
PIXI.loader.resources[“cupCake.png”].texture
);
//把猫加入舞台
这个.stage.addChild（cat）；
//上台
this.renderer.render（this.stage）；
});
}
组件将卸载（）{
this.refs.gameCanvas.removeChild（this.renderer.view）；
PIXI.TextureCache['cupCake.png'].destroy（true）；
}
render（）{
返回(
);
}
}

那么我如何才能完全重置/删除状态和资产呢？
答案是使用最新的v4版本的PIXI

移除纹理的最佳方法是调用

this.stage.destroy(true);
this.stage = null;

这将破坏舞台，它的所有孩子，以及它的孩子正在使用的任何纹理

然后呢

this.refs.gameCanvas.removeChild(this.renderer.view);

添加行

this.renderer.destroy( true );
this.renderer = null;

这似乎不利于清洁。作为测试，创建了一个密钥处理程序，用于创建渲染器，然后在超时100毫秒后将其清除。大约8次之后，我发现了上下文错误。