feat: plot 更新优化，减少非必要更新

Author: Leannechn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bizcharts",
-  "version": "4.1.15-beta.1",
+  "version": "4.1.15",
   "description": "bizcharts",
   "keywords": [
     "bizcharts",

src/core.ts

@@ -17,7 +17,7 @@ registerEngine('svg', SVGEngine);
 
 // @ts-ignore
 export * from '@antv/g2/lib/core';
-export const VERSION = '4.1.15-beta.1';
+export const VERSION = '4.1.15';
 
 
 

src/createPlot.tsx

@@ -20,7 +20,8 @@ import {
   polyfillTitleEvent,
   polyfillDescriptionEvent,
 } from './plots/core/polyfill';
-import { debounce, isArray, isFunction, isNil, isEqual } from '@antv/util';
+import { debounce, isArray, isFunction, isNil } from '@antv/util';
+import isEqual from './utils/isEqual';
 import warn from 'warning';
 
 // 国际化处理
@@ -100,13 +101,13 @@ class BasePlot extends React.Component<any> {
     }
     polyfillEvents(this.g2Instance, {}, this.props);
     this.g2Instance.data = this.props.data;
-    this.preConfig = pickWithout(this.props, [
+    this.preConfig = cloneDeep(pickWithout(this.props, [
       ...REACT_PIVATE_PROPS,
       'container',
       'PlotClass',
       'onGetG2Instance',
       'data',
-    ]);
+    ]));
   }
   componentDidUpdate(prevProps) {
     if (this.props.children && this.g2Instance.chart) {
@@ -149,11 +150,12 @@ class BasePlot extends React.Component<any> {
       this.g2Instance.destroy();
       this.initInstance();
       this.g2Instance.render();
-    } else if (this.diffConfig()) {
-      // 对比options是否更新
-      if (!isEqual(currentConfig, this.preConfig)) {
-        this.g2Instance.update(currentConfig);
-      }
+    } else if (this.diffConfig() ) {
+      // options更新
+      this.g2Instance.update({
+        ...currentConfig,
+        data: this.props.data
+      });
     } else if (this.diffData()) {
       this.g2Instance.changeData(this.props.data);
     }
@@ -180,7 +182,7 @@ class BasePlot extends React.Component<any> {
       'onGetG2Instance',
       'data',
     ]);
-    return !shallowEqual(preConfig, currentConfig);
+    return !isEqual(preConfig, currentConfig);
   }
   diffData() {
     // 只有数据更新就不重绘，其他全部直接重新创建实例。

src/utils/isEqual.ts

@@ -0,0 +1,42 @@
+
+import { isObject, isArray } from '@antv/util';
+
+const isEqual = (value: any, other: any): boolean => {
+  if (isObject(value) && isObject(other)) {
+    const valueKeys = Object.keys(value);
+    const otherKeys = Object.keys(other);
+    if (valueKeys.length !== otherKeys.length) {
+      return false;
+    }
+    let rst = true;
+    for (let i = 0; i < valueKeys.length; i++) {
+      rst = isEqual(value[valueKeys[i]], other[valueKeys[i]]);
+      if (!rst) {
+        break;
+      }
+    }
+    return rst;
+  }
+  if (isArray(value) && isArray(other)) {
+    if (value.length !== other.length) {
+      return false;
+    }
+    let rst = true;
+    for (let i = 0; i < value.length; i++) {
+      rst = isEqual(value[i], other[i]);
+      if (!rst) {
+        break;
+      }
+    }
+    return rst;
+  }
+  if (value === other) {
+    return true;
+  }
+  if (!value || !other) {
+    return false;
+  }
+  return false;
+};
+
+export default isEqual;

unittest/plots/_update-option-spec.tsx

@@ -31,6 +31,10 @@ const Demo = () => {
       setState({...opt, seriesField: undefined });
       console.log('change')
     }}>click me change option seriesField</div>
+    <div onClick={() => {
+      setState({...opt, data: [] });
+      console.log('change')
+    }}>click me change option seriesField</div>
 
     <BarChart
       {...option}