feat(charts): Add customMemo for charts based on @ant-design/charts

oceanbase · Sep 26, 2023 · 15ae303 · 15ae303
1 parent d07096c
commit 15ae303
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 13 deletions.
diff --git a/packages/charts/src/Area/index.tsx b/packages/charts/src/Area/index.tsx
@@ -7,6 +7,7 @@ import type { Tooltip } from '../hooks/useTooltipScrollable';
 import useTooltipScrollable from '../hooks/useTooltipScrollable';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface AreaConfig extends AntAreaConfig {
   tooltip?: false | Tooltip;
@@ -98,4 +99,4 @@ const Area: React.FC<AreaConfig> = forwardRef(
   }
 );
 
-export default Area;
+export default customMemo(Area);
diff --git a/packages/charts/src/Bar/index.tsx b/packages/charts/src/Bar/index.tsx
@@ -5,6 +5,7 @@ import { uniq } from 'lodash';
 import { toPercent } from '../util/number';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface BarConfig extends AntBarConfig {
   // 是否为进度条形图，数值范围为 0 ~ 1
@@ -154,4 +155,4 @@ const Bar: React.FC<BarConfig> = forwardRef(
   }
 );
 
-export default Bar;
+export default customMemo(Bar);
diff --git a/packages/charts/src/Column/index.tsx b/packages/charts/src/Column/index.tsx
@@ -4,6 +4,7 @@ import { Column as AntColumn } from '@ant-design/charts';
 import { uniq } from 'lodash';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface ColumnConfig extends AntColumnConfig {
   theme?: Theme;
@@ -94,4 +95,4 @@ const Column: React.FC<ColumnConfig> = forwardRef(
   }
 );
 
-export default Column;
+export default customMemo(Column);
diff --git a/packages/charts/src/DualAxes/index.tsx b/packages/charts/src/DualAxes/index.tsx
@@ -11,6 +11,7 @@ import type { Tooltip } from '../hooks/useTooltipScrollable';
 import useTooltipScrollable from '../hooks/useTooltipScrollable';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface DualAxesConfig extends Omit<AntDualAxesConfig, 'yAxis'> {
   // 限制双轴图的 yAxis 为对象格式，而非数组格式。官方文档的示例均为对象格式，方便统一用法
@@ -147,4 +148,4 @@ const DualAxes: React.FC<DualAxesConfig> = forwardRef(
   }
 );
 
-export default DualAxes;
+export default customMemo(DualAxes);
diff --git a/packages/charts/src/Gauge/index.tsx b/packages/charts/src/Gauge/index.tsx
@@ -4,6 +4,7 @@ import { Gauge as AntGauge } from '@ant-design/charts';
 import { toPercent } from '../util/number';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface GaugeConfig extends AntGaugeConfig {
   theme?: Theme;
@@ -70,4 +71,4 @@ const Gauge: React.FC<GaugeConfig> = forwardRef(
   }
 );
 
-export default Gauge;
+export default customMemo(Gauge);
diff --git a/packages/charts/src/Histogram/index.tsx b/packages/charts/src/Histogram/index.tsx
@@ -3,6 +3,7 @@ import type { HistogramConfig as AntHistogramConfig } from '@ant-design/charts';
 import { Histogram as AntHistogram } from '@ant-design/charts';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface HistogramConfig extends AntHistogramConfig {
   theme?: Theme;
@@ -62,4 +63,4 @@ const Histogram: React.FC<HistogramConfig> = forwardRef(
   }
 );
 
-export default Histogram;
+export default customMemo(Histogram);
diff --git a/packages/charts/src/Line/index.tsx b/packages/charts/src/Line/index.tsx
@@ -7,6 +7,7 @@ import type { Tooltip } from '../hooks/useTooltipScrollable';
 import useTooltipScrollable from '../hooks/useTooltipScrollable';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface LineConfig extends AntLineConfig {
   tooltip?: false | Tooltip;
@@ -93,4 +94,4 @@ const Line: React.FC<LineConfig> = forwardRef(
   }
 );
 
-export default Line;
+export default customMemo(Line);
diff --git a/packages/charts/src/Liquid/index.tsx b/packages/charts/src/Liquid/index.tsx
@@ -6,6 +6,7 @@ import type { PathCommand } from '@antv/g-base';
 import { toPercent } from '../util/number';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 function rectWithRadius(x: number, y: number, width: number, height: number): PathCommand[] {
   const GOLDEN_SECTION_RATIO = 0.618;
@@ -178,4 +179,4 @@ const Liquid: React.FC<LiquidConfig> = forwardRef(
   }
 );
 
-export default Liquid;
+export default customMemo(Liquid);
diff --git a/packages/charts/src/Pie/demo/state-change.tsx b/packages/charts/src/Pie/demo/state-change.tsx
@@ -0,0 +1,86 @@
+import React, { useState, useCallback } from 'react';
+import { Pie } from '@oceanbase/charts';
+
+const Demo: React.FC = () => {
+  const [count, setCount] = useState(1);
+  const [data, setData] = useState([
+    {
+      type: '分类一',
+      value: 27,
+    },
+    {
+      type: '分类二',
+      value: 25,
+    },
+    {
+      type: '分类三',
+      value: 18,
+    },
+    {
+      type: '分类四',
+      value: 15,
+    },
+    {
+      type: '分类五',
+      value: 10,
+    },
+    {
+      type: '其他',
+      value: 5,
+    },
+  ]);
+
+  // memo function to avoid re-render
+  const onReady = useCallback(plot => {
+    console.log(plot);
+  }, []);
+
+  const config = {
+    data,
+    angleField: 'value',
+    colorField: 'type',
+    onReady,
+  };
+
+  return (
+    <div>
+      <span>{count}</span>
+      <button
+        onClick={() => {
+          setCount(count + 1);
+        }}
+        style={{
+          marginLeft: 16,
+        }}
+      >
+        外部状态改变不会重新渲染
+      </button>
+      <button
+        onClick={() => {
+          setData([
+            {
+              type: '分类四',
+              value: 15,
+            },
+            {
+              type: '分类五',
+              value: 10,
+            },
+            {
+              type: '其他',
+              value: Math.random() * 100,
+            },
+          ]);
+        }}
+        style={{
+          marginLeft: 16,
+        }}
+      >
+        数据改变重新渲染
+      </button>
+      <Pie {...config} />
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/packages/charts/src/Pie/index.md b/packages/charts/src/Pie/index.md
@@ -13,6 +13,8 @@ nav:
 
 <code src="./demo/half-donut.tsx" title="半圆环图"></code>
 
+<code src="./demo/state-change.tsx" title="useMemo-状态改变" debug></code>
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

diff --git a/packages/charts/src/Pie/index.tsx b/packages/charts/src/Pie/index.tsx
@@ -4,6 +4,7 @@ import { Pie as AntPie } from '@ant-design/charts';
 import { isString } from 'lodash';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export const measureTextSize = (text: string, font: any = {}) => {
   const { fontSize, fontFamily = 'sans-serif', fontWeight, fontStyle, fontVariant } = font;
@@ -185,4 +186,4 @@ const Pie: React.FC<PieConfig> = forwardRef(
   }
 );
 
-export default Pie;
+export default customMemo(Pie);
diff --git a/packages/charts/src/Tiny/Progress.tsx b/packages/charts/src/Tiny/Progress.tsx
@@ -5,6 +5,7 @@ import useResizeObserver from 'use-resize-observer';
 import { toPercent } from '../util/number';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface ProgressConfig extends AntProgressConfig {
   maxColumnWidth?: number;
@@ -116,4 +117,4 @@ const Progress: React.FC<ProgressConfig> = forwardRef(
   }
 );
 
-export default Progress;
+export default customMemo(Progress);
diff --git a/packages/charts/src/Tiny/TinyArea.tsx b/packages/charts/src/Tiny/TinyArea.tsx
@@ -4,6 +4,7 @@ import { TinyArea as AntTinyArea } from '@ant-design/charts';
 import type { Plot, AllBaseConfig } from '@ant-design/charts';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface TinyAreaRef {
   getChart: () => Plot<AllBaseConfig>;
@@ -52,4 +53,4 @@ const TinyArea: React.FC<TinyAreaConfig> = forwardRef<TinyAreaRef, TinyAreaConfi
   }
 );
 
-export default TinyArea;
+export default customMemo(TinyArea);
diff --git a/packages/charts/src/Tiny/TinyColumn.tsx b/packages/charts/src/Tiny/TinyColumn.tsx
@@ -5,6 +5,7 @@ import { TinyColumn as AntTinyColumn } from '@ant-design/charts';
 import type { Label } from '@antv/g2plot/esm/types/label';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface TinyColumnConfig extends AntTinyColumnConfig {
   theme?: Theme;
@@ -40,4 +41,4 @@ const TinyColumn: React.FC<TinyColumnConfig> = forwardRef(
   }
 );
 
-export default TinyColumn;
+export default customMemo(TinyColumn);
diff --git a/packages/charts/src/Tiny/TinyLine.tsx b/packages/charts/src/Tiny/TinyLine.tsx
@@ -3,6 +3,7 @@ import type { TinyLineConfig as AntTinyLineConfig } from '@ant-design/charts';
 import { TinyLine as AntTinyLine } from '@ant-design/charts';
 import { useTheme } from '../theme';
 import type { Theme } from '../theme';
+import { customMemo } from '../util/custom-memo';
 
 export interface TinyLineConfig extends AntTinyLineConfig {
   theme?: Theme;
@@ -40,4 +41,4 @@ const TinyLine: React.FC<TinyLineConfig> = forwardRef(
   }
 );
 
-export default TinyLine;
+export default customMemo(TinyLine);
diff --git a/packages/charts/src/util/custom-memo.ts b/packages/charts/src/util/custom-memo.ts
@@ -0,0 +1,13 @@
+import { memo } from 'react';
+import type { FunctionComponent } from 'react';
+import { isEqual } from 'lodash';
+import type { BaseConfig, AllBaseConfig } from '@ant-design/charts';
+
+export function customMemo<P extends BaseConfig<AllBaseConfig>>(
+  Component: FunctionComponent<P>,
+  propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean
+) {
+  return memo(Component, (prevProps, nextProps) =>
+    propsAreEqual ? propsAreEqual(prevProps, nextProps) : isEqual(prevProps, nextProps)
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,8 @@ nav: @@
     <code src="./demo/half-donut.tsx" title="半圆环图"></code>
+    <code src="./demo/state-change.tsx" title="useMemo-状态改变" debug></code>
     ## API
     | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ Expand Down @@