diff --git a/packages/f-my/src/index.tsx b/packages/f-my/src/index.tsx index c0fe90e5..8dc4f858 100644 --- a/packages/f-my/src/index.tsx +++ b/packages/f-my/src/index.tsx @@ -52,6 +52,7 @@ Component({ this.setCanvasId(); }, didMount() { + this.destroyed = false; if (!isAppX2CanvasEnv()) { console.error('当前基础库版本过低,请升级基础库版本到 2.7.0 或以上。'); } @@ -75,6 +76,12 @@ Component({ }); }, didUnmount() { + this.destroyed = true; + if (this.renderFrameId != null) { + this.nativeCanvas?.cancelAnimationFrame(this.renderFrameId); + this.renderFrameId = null; + } + this.nativeCanvas = null; const { canvas } = this; if (!canvas) return; canvas.destroy(); @@ -105,6 +112,7 @@ Component({ } const { width, height } = canvas; + this.nativeCanvas = canvas; const pixelRatio = Math.ceil(getPixelRatio()); @@ -115,18 +123,27 @@ Component({ height: height * pixelRatio, }, () => { - const context = canvas.getContext('2d'); - const fCanvas = this.createCanvas({ - width, - height, - pixelRatio, - context, - createImage: canvas.createImage.bind(canvas), - requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas), - cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas), - }); - fCanvas.render().catch((error) => { - this.catchError(error); + if (this.destroyed) { + return; + } + this.renderFrameId = canvas.requestAnimationFrame(() => { + this.renderFrameId = null; + if (this.destroyed) { + return; + } + const context = canvas.getContext('2d'); + const fCanvas = this.createCanvas({ + width, + height, + pixelRatio, + context, + createImage: canvas.createImage.bind(canvas), + requestAnimationFrame: canvas.requestAnimationFrame.bind(canvas), + cancelAnimationFrame: canvas.cancelAnimationFrame.bind(canvas), + }); + fCanvas.render().catch((error) => { + this.catchError(error); + }); }); }, );