fix: 延迟支付宝 canvas 首帧渲染

Author: huaxiabuluo

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,11 @@ Component({
     });
   },
   didUnmount() {
+    this.destroyed = true;
+    if (this.renderFrameId != null) {
+      this.nativeCanvas?.cancelAnimationFrame(this.renderFrameId);
+      this.renderFrameId = null;
+    }
     const { canvas } = this;
     if (!canvas) return;
     canvas.destroy();
@@ -105,6 +111,7 @@ Component({
           }
 
           const { width, height } = canvas;
+          this.nativeCanvas = canvas;
 
           const pixelRatio = Math.ceil(getPixelRatio());
 
@@ -115,18 +122,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);
+                });
               });
             },
           );