perf: optimize data update

Author: kagawagao

docs/guide/get-started.md

@@ -254,11 +254,11 @@ export default () => {
   const [restConfig, setConfig] = useState({})
 
   const handleBtnClick = useCallback(() => {
-    setConfig({
+    setConfig((config) => ({
       point: {
-        visible: false,
+        visible: config.point ? !config.point.visible : false,
       },
-    })
+    }))
   }, [])
 
   return (

package-lock.json

@@ -47,7 +47,7 @@
     "postversion": "npm publish"
   },
   "devDependencies": {
-    "@antv/g2plot": "^1.1.7",
+    "@antv/g2plot": "^1.1.14",
     "@babel/cli": "^7.10.5",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^9.1.1",
@@ -56,7 +56,7 @@
     "@opd/jest-preset-pangu": "^1.5.0",
     "@opd/prettier-config-pangu": "^1.2.0",
     "@types/jest": "^26.0.5",
-    "@types/lodash": "^4.14.157",
+    "@types/lodash": "^4.14.158",
     "@types/react": "^16.9.43",
     "@types/react-dom": "^16.9.8",
     "@types/react-test-renderer": "^16.9.2",

package.json

@@ -17,6 +17,7 @@ import {
   ViewLayer,
   PlotConfig,
   ViewConfig,
+  DataItem,
 } from '@antv/g2plot'
 import { StateManagerContext } from '../state-manager'
 import { RecursivePartial } from '@antv/g2plot/lib/interface/types'
@@ -52,7 +53,7 @@ interface StateManagerCfg {
 interface ChartConfig extends PlotConfig, ViewConfig {}
 
 export interface Plot<C extends PlotConfig> {
-  new (container: HTMLElement, props: C): BasePlot<C, LayerCtor<C>>
+  new (container: HTMLElement, config: C): BasePlot<C, LayerCtor<C>>
 }
 
 const syncRef = <C extends PlotConfig>(
@@ -92,18 +93,21 @@ const BaseChart = <C extends PlotConfig>(
   const containerRef = useRef<HTMLDivElement>(null)
   const stateManager = useContext(StateManagerContext)
   const isFirstRenderRef = useRef<boolean>(true)
+  const dataRef = useRef<DataItem[]>([])
 
   useImperativeHandle(ref, () => containerRef.current)
 
   useEffect(() => {
     const { current: container } = containerRef
     /* istanbul ignore else */
     if (container) {
-      const { data = [], ...config } = restProps as ChartConfig
+      const { data, ...config } = restProps as ChartConfig
       configRef.current = cloneDeep(config)
+      const normalizedData = data || []
+      dataRef.current = normalizedData
       const mergedConfig = {
         ...config,
-        data,
+        data: normalizedData,
       } as any
       chartRef.current = new Chart(container, mergedConfig)
       chartRef.current.render()
@@ -131,17 +135,19 @@ const BaseChart = <C extends PlotConfig>(
       // avoid update in first time
       if (!isFirstRenderRef.current) {
         const { data, ...config } = restProps as ChartConfig
-        if (!isEqual(config, configRef.current)) {
+        const normalizedData = data || []
+        if (!isEqual(config, configRef.current) || !dataRef.current.length) {
           configRef.current = cloneDeep(config)
-          chart.updateConfig(config as RecursivePartial<C>)
+          const mergedConfig = {
+            ...config,
+            data: normalizedData,
+          } as RecursivePartial<C>
+          chart.updateConfig(mergedConfig)
           chart.render()
         } else {
-          if (data) {
-            chart.changeData(data)
-          } else {
-            chart.changeData([])
-          }
+          chart.changeData(normalizedData)
         }
+        dataRef.current = normalizedData
       } else {
         isFirstRenderRef.current = false
       }