feat: 性能优化，没有更新时不render

antvis · May 13, 2021 · d0a7732 · d0a7732
1 parent 1965ca4
commit d0a7732
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 5 deletions.
diff --git a/packages/components/src/canvas/animation/animator.ts b/packages/components/src/canvas/animation/animator.ts
@@ -113,6 +113,9 @@ class Animator {
       element.remove(true);
     }
 
+    // 清空 不需要重复执行
+    element.set('animation', null);
+
     this.end = true;
   }
 }

diff --git a/packages/components/src/component/container.ts b/packages/components/src/component/container.ts
@@ -90,6 +90,9 @@ class ContainerComponent extends Component {
     const appendProps = this._getAppendProps();
 
     map(components, (component: Component) => {
+      if (!component.__shouldRender) {
+        return;
+      }
       this.renderComponent(component, appendProps);
     });
 
@@ -186,6 +189,10 @@ class ContainerComponent extends Component {
       }
       if (!equal(props, component.__props) || forceUpdate) {
         component.update(props);
+        component.__shouldRender = true;
+      } else {
+        // 没有变化，不需要重新render
+        component.__shouldRender = false;
       }
 
       return component;

diff --git a/packages/components/src/component/equal.ts b/packages/components/src/component/equal.ts
@@ -25,11 +25,6 @@ function equal(a: any, b: any): boolean {
     return true;
   }
 
-  // 值类型，Number String Boolean
-  if (typeof a !== 'object') {
-    return false;
-  }
-
   if (objToString(a) !== objToString(b)) {
     return false;
   }
@@ -39,6 +34,11 @@ function equal(a: any, b: any): boolean {
     return true;
   }
 
+  // 值类型，Number String Boolean
+  if (typeof a !== 'object') {
+    return false;
+  }
+
   if (isArray(a)) {
     if (a.length !== b.length) {
       return false;

diff --git a/packages/components/src/component/index.ts b/packages/components/src/component/index.ts
@@ -15,6 +15,8 @@ class Component {
   __shape: any;
   __props: any;
   __mounted = false;
+  // 表示是否需要调用render渲染
+  __shouldRender = true;
   // actions: any;
 
   // TODO for TypeScript
@@ -44,6 +46,7 @@ class Component {
   update(props: any) {
     this.__props = props;
     this.props = props;
+    this.__isDirty = true;
   }
   // TODO
   forceUpdate() {