From 15ae3038501bc15aa2ac96d9ffcbcfc796acecc0 Mon Sep 17 00:00:00 2001 From: dengfuping Date: Tue, 26 Sep 2023 15:20:47 +0800 Subject: [PATCH] feat(charts): Add customMemo for charts based on @ant-design/charts --- packages/charts/src/Area/index.tsx | 3 +- packages/charts/src/Bar/index.tsx | 3 +- packages/charts/src/Column/index.tsx | 3 +- packages/charts/src/DualAxes/index.tsx | 3 +- packages/charts/src/Gauge/index.tsx | 3 +- packages/charts/src/Histogram/index.tsx | 3 +- packages/charts/src/Line/index.tsx | 3 +- packages/charts/src/Liquid/index.tsx | 3 +- packages/charts/src/Pie/demo/state-change.tsx | 86 +++++++++++++++++++ packages/charts/src/Pie/index.md | 2 + packages/charts/src/Pie/index.tsx | 3 +- packages/charts/src/Tiny/Progress.tsx | 3 +- packages/charts/src/Tiny/TinyArea.tsx | 3 +- packages/charts/src/Tiny/TinyColumn.tsx | 3 +- packages/charts/src/Tiny/TinyLine.tsx | 3 +- packages/charts/src/util/custom-memo.ts | 13 +++ 16 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 packages/charts/src/Pie/demo/state-change.tsx create mode 100644 packages/charts/src/util/custom-memo.ts diff --git a/packages/charts/src/Area/index.tsx b/packages/charts/src/Area/index.tsx index cc62b236f..096667aeb 100644 --- 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 = forwardRef( } ); -export default Area; +export default customMemo(Area); diff --git a/packages/charts/src/Bar/index.tsx b/packages/charts/src/Bar/index.tsx index a0e96e9bd..91f0f2891 100644 --- 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 = forwardRef( } ); -export default Bar; +export default customMemo(Bar); diff --git a/packages/charts/src/Column/index.tsx b/packages/charts/src/Column/index.tsx index 618dea96d..acdd6dc3d 100644 --- 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 = forwardRef( } ); -export default Column; +export default customMemo(Column); diff --git a/packages/charts/src/DualAxes/index.tsx b/packages/charts/src/DualAxes/index.tsx index eb018ce3a..b748de1fa 100644 --- 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 { // 限制双轴图的 yAxis 为对象格式，而非数组格式。官方文档的示例均为对象格式，方便统一用法 @@ -147,4 +148,4 @@ const DualAxes: React.FC = forwardRef( } ); -export default DualAxes; +export default customMemo(DualAxes); diff --git a/packages/charts/src/Gauge/index.tsx b/packages/charts/src/Gauge/index.tsx index c055629a1..7e728b23d 100644 --- 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 = forwardRef( } ); -export default Gauge; +export default customMemo(Gauge); diff --git a/packages/charts/src/Histogram/index.tsx b/packages/charts/src/Histogram/index.tsx index a89191581..de16b2b6e 100644 --- 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 = forwardRef( } ); -export default Histogram; +export default customMemo(Histogram); diff --git a/packages/charts/src/Line/index.tsx b/packages/charts/src/Line/index.tsx index 1275f94f9..e0f3894e2 100644 --- 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 = forwardRef( } ); -export default Line; +export default customMemo(Line); diff --git a/packages/charts/src/Liquid/index.tsx b/packages/charts/src/Liquid/index.tsx index 8d4d6ed00..ba07157ce 100644 --- 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 = 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 new file mode 100644 index 000000000..82d4ae050 --- /dev/null +++ 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 ( +
+ {count} + + + +
+ ); +}; + +export default Demo; diff --git a/packages/charts/src/Pie/index.md b/packages/charts/src/Pie/index.md index 4e54b375a..fc30499a1 100644 --- a/packages/charts/src/Pie/index.md +++ b/packages/charts/src/Pie/index.md @@ -13,6 +13,8 @@ nav: + + ## API | 参数 | 说明 | 类型 | 默认值 | 版本 | diff --git a/packages/charts/src/Pie/index.tsx b/packages/charts/src/Pie/index.tsx index 428ff1c8b..110d2ba09 100644 --- 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 = forwardRef( } ); -export default Pie; +export default customMemo(Pie); diff --git a/packages/charts/src/Tiny/Progress.tsx b/packages/charts/src/Tiny/Progress.tsx index b2b597d70..f6d52f1ae 100644 --- 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 = forwardRef( } ); -export default Progress; +export default customMemo(Progress); diff --git a/packages/charts/src/Tiny/TinyArea.tsx b/packages/charts/src/Tiny/TinyArea.tsx index e19f1f8f1..f4246625a 100644 --- 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; @@ -52,4 +53,4 @@ const TinyArea: React.FC = forwardRef = forwardRef( } ); -export default TinyColumn; +export default customMemo(TinyColumn); diff --git a/packages/charts/src/Tiny/TinyLine.tsx b/packages/charts/src/Tiny/TinyLine.tsx index a1009df07..dcb8ac043 100644 --- 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 = 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 new file mode 100644 index 000000000..251c4a9cb --- /dev/null +++ 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

>( + Component: FunctionComponent

, + propsAreEqual?: (prevProps: Readonly

, nextProps: Readonly

) => boolean +) { + return memo(Component, (prevProps, nextProps) => + propsAreEqual ? propsAreEqual(prevProps, nextProps) : isEqual(prevProps, nextProps) + ); +}