fix: 统一处理小程序更新的逻辑 (#1463)

antvis · Apr 29, 2022 · 46b5a4a · 46b5a4a
1 parent 4d0c41b
commit 46b5a4a
Show file tree

Hide file tree

Showing 9 changed files with 193 additions and 83 deletions.
diff --git a/packages/my/examples/test/pages/index/_index.js b/packages/my/examples/test/pages/index/_index.js
diff --git a/packages/my/examples/test/pages/index/_index.jsx b/packages/my/examples/test/pages/index/_index.jsx
diff --git a/packages/my/examples/test/pages/index/index.axml b/packages/my/examples/test/pages/index/index.axml
@@ -1,3 +1,3 @@
 <view class="container">
-  <f2 onRender="onRenderChart"></f2>
+  <f2 onRender="onRenderChart" data="{{chartData}}"></f2>
 </view>
diff --git a/packages/my/examples/test/pages/index/index.js b/packages/my/examples/test/pages/index/index.js
@@ -1,21 +1,62 @@
 // 通过 createElement 方式创建
 import { createElement } from '@antv/f2';
 import Chart from './chart';
+import { jsx as _jsx } from "@antv/f2/jsx-runtime";
+const data1 = [{
+  genre: 'Sports',
+  sold: 275
+}, {
+  genre: 'Strategy',
+  sold: 115
+}, {
+  genre: 'Action',
+  sold: 120
+}, {
+  genre: 'Shooter',
+  sold: 350
+}, {
+  genre: 'Other',
+  sold: 150
+}];
+const data2 = [{
+  genre: 'Sports',
+  sold: 275
+}, {
+  genre: 'Strategy',
+  sold: 115
+}, {
+  genre: 'Action',
+  sold: 20
+}, {
+  genre: 'Shooter',
+  sold: 50
+}, {
+  genre: 'Other',
+  sold: 50
+}];
+Page({
+  data: {// chartData: data1,
+  },
 
-const data = [
-  { genre: 'Sports', sold: 275 },
-  { genre: 'Strategy', sold: 115 },
-  { genre: 'Action', sold: 120 },
-  { genre: 'Shooter', sold: 350 },
-  { genre: 'Other', sold: 150 }
-];
+  onReady() {
+    this.setData({
+      chartData: data1
+    }); // 模拟数据更新
 
-Page({
-  data: {
+    setTimeout(() => {
+      this.setData({
+        chartData: data2
+      });
+    }, 2000);
   },
-  onRenderChart() {
-    return createElement(Chart, {
+
+  onRenderChart(props) {
+    const {
+      data
+    } = props;
+    return _jsx(Chart, {
       data: data
     });
   }
-});
+
+});
diff --git a/packages/my/examples/test/pages/index/index.jsx b/packages/my/examples/test/pages/index/index.jsx
@@ -0,0 +1,45 @@
+// 通过 createElement 方式创建
+import { createElement } from '@antv/f2';
+import Chart from './chart';
+
+const data1 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 120 },
+  { genre: 'Shooter', sold: 350 },
+  { genre: 'Other', sold: 150 },
+];
+
+const data2 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 20 },
+  { genre: 'Shooter', sold: 50 },
+  { genre: 'Other', sold: 50 },
+];
+
+Page({
+  data: {
+    // chartData: data1,
+  },
+  onReady() {
+    this.setData({
+      chartData: data1,
+    });
+    // 模拟数据更新
+    setTimeout(() => {
+      this.setData({
+        chartData: data2,
+      });
+    }, 2000);
+  },
+  onRenderChart(props) {
+    const { data } = props;
+    return <Chart data={data} />;
+
+    // 如果不使用 jsx, 用下面代码效果也是一样的
+    // return createElement(Chart, {
+    //   data: data,
+    // });
+  },
+});
diff --git a/packages/my/src/index.tsx b/packages/my/src/index.tsx
@@ -16,7 +16,7 @@ const isAppX2CanvasEnv = () =>
 
 Component({
   props: {
-    onRender: () => {},
+    onRender: (_props) => {},
     // width height 会作为元素兜底的宽高使用
     width: null,
     height: null,
@@ -60,7 +60,7 @@ Component({
   didUpdate() {
     const { canvas, props } = this;
     if (!canvas) return;
-    const children = props.onRender();
+    const children = props.onRender(props);
     canvas.update({
       children,
     });
@@ -100,7 +100,7 @@ Component({
       if (!width || !height) {
         return;
       }
-      const children = this.props.onRender();
+      const children = this.props.onRender(this.props);
       const canvas = new Canvas({
         pixelRatio,
         width,

diff --git a/packages/wx/examples/test/pages/index/index.js b/packages/wx/examples/test/pages/index/index.js
@@ -1,8 +1,8 @@
 // index.js
-// import { createElement } from '@antv/f2';
+import { createElement } from '@antv/f2';
 import Chart from './chart';
 import { jsx as _jsx } from "@antv/f2/jsx-runtime";
-const data = [{
+const data1 = [{
   genre: 'Sports',
   sold: 275
 }, {
@@ -18,16 +18,51 @@ const data = [{
   genre: 'Other',
   sold: 150
 }];
+const data2 = [{
+  genre: 'Sports',
+  sold: 275
+}, {
+  genre: 'Strategy',
+  sold: 115
+}, {
+  genre: 'Action',
+  sold: 20
+}, {
+  genre: 'Shooter',
+  sold: 50
+}, {
+  genre: 'Other',
+  sold: 50
+}];
 Page({
   data: {
-    onRenderChart() {
-      return _jsx(Chart, {
-        data: data
-      }); // 如果不使用 jsx, 用下面代码效果也是一样的
-      // return createElement(Chart, {
-      //   data: data,
-      // });
-    }
+    chartData: data1,
+    onRenderChart: () => {}
+  },
 
+  onReady() {
+    this.setData({
+      onRenderChart: () => {
+        return this.renderChart(data1);
+      }
+    }); // 模拟数据更新
+
+    setTimeout(() => {
+      this.setData({
+        onRenderChart: () => {
+          return this.renderChart(data2);
+        }
+      });
+    }, 2000);
+  },
+
+  renderChart(data) {
+    return _jsx(Chart, {
+      data: data
+    }); // 如果不使用 jsx, 用下面代码效果也是一样的
+    // return createElement(Chart, {
+    //   data: data,
+    // });
   }
+
 });
diff --git a/packages/wx/examples/test/pages/index/index.jsx b/packages/wx/examples/test/pages/index/index.jsx
@@ -2,23 +2,47 @@
 import { createElement } from '@antv/f2';
 import Chart from './chart';
 
-const data = [
+const data1 = [
   { genre: 'Sports', sold: 275 },
   { genre: 'Strategy', sold: 115 },
   { genre: 'Action', sold: 120 },
   { genre: 'Shooter', sold: 350 },
-  { genre: 'Other', sold: 150 },
+  { genre: 'Other', sold: 150 }
+];
+
+const data2 = [
+  { genre: 'Sports', sold: 275 },
+  { genre: 'Strategy', sold: 115 },
+  { genre: 'Action', sold: 20 },
+  { genre: 'Shooter', sold: 50 },
+  { genre: 'Other', sold: 50 }
 ];
 
 Page({
   data: {
-    onRenderChart() {
-      return <Chart data={data} />;
+    onRenderChart: () => {},
+  },
+  onReady() {
+    this.setData({
+      onRenderChart: () => {
+        return this.renderChart(data1);
+      },
+    })
 
-      // 如果不使用 jsx, 用下面代码效果也是一样的
-      // return createElement(Chart, {
-      //   data: data,
-      // });
-    },
+    // 模拟数据更新
+    setTimeout(() => {
+      this.setData({
+        onRenderChart: () => {
+          return this.renderChart(data2);
+        },
+      })
+    }, 2000);
+  },
+  renderChart(data) {
+    return <Chart data={data} />;
+    // 如果不使用 jsx, 用下面代码效果也是一样的
+    // return createElement(Chart, {
+    //   data: data,
+    // });
   },
 });
diff --git a/packages/wx/src/index.ts b/packages/wx/src/index.ts
@@ -39,7 +39,7 @@ Component({
         // 高清设置
         node.width = width * pixelRatio;
         node.height = height * pixelRatio;
-        const children = this.data.onRender();
+        const children = this.data.onRender(this.data);
         const canvas = new Canvas({
           pixelRatio,
           width,
@@ -53,6 +53,18 @@ Component({
       });
   },
 
+  observers: {
+    // 处理 update
+    '**': function() {
+      const { canvas, data } = this;
+      if (!canvas) return;
+      const children = data.onRender(data);
+      canvas.update({
+        children,
+      });
+    },
+  },
+
   lifetimes: {
     detached() {
       const { canvas } = this;