refactor: use hooks

Author: hustcc

.github/workflows/build.yml

@@ -27,10 +27,3 @@ jobs:
       - name: npm run build
         run: |
           npm run build
-      - name: gh-pages
-        uses: ad-m/github-push-action@master
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          directory: public
-          branch: gh-pages
-          force: true

.github/workflows/rebase.yml

@@ -7,7 +7,7 @@
 [![npm](https://img.shields.io/npm/v/react-g2plot.svg)](https://www.npmjs.com/package/react-g2plot)
 [![Build Status](https://github.com/hustcc/react-g2plot/workflows/build/badge.svg)](https://github.com/hustcc/react-g2plot/actions)
 [![npm](https://img.shields.io/npm/dm/react-g2plot.svg)](https://www.npmjs.com/package/react-g2plot)
-[![react supported](https://img.shields.io/badge/React-%5E0.14.0%20%7C%7C%20%5E15.0.0%20%7C%7C%20%5E16.0.0-blue.svg)](https://github.com/hustcc/react-g2plot)
+[![React Supported](https://img.shields.io/badge/React-%3E=16.8.0-blue.svg)](https://github.com/hustcc/react-g2plot)
 [![npm](https://img.shields.io/npm/l/react-g2plot.svg)](https://www.npmjs.com/package/react-g2plot)
 
 

README.md

@@ -34,7 +34,11 @@ const config = {
   smooth: true,
 };
 
+function ref(plot) {
+  console.log('G2Plot instance Ref', plot);
+}
+
 ReactDOM.render(
-  <ReactG2Plot className="g2plot-for-react" Ctor={Line} config={config} />,
+  <ReactG2Plot className="g2plot-for-react" Ctor={Line} config={config} ref={ref} />,
   document.getElementById('root-container'),
 );

demo/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "react-g2plot",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Unofficial react component wrapper for @antv/g2plot.",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -16,6 +16,8 @@
     "build:cjs": "rimraf ./lib && tsc --module commonjs --outDir lib",
     "build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm",
     "build:demo": "rimraf ./public && webpack",
+    "demo": "DEBUG_MODE=1 jest",
+    "deploy": "gh-pages -d public",
     "prepublishOnly": "npm run build"
   },
   "repository": {
@@ -28,7 +30,7 @@
     "react-g2plot",
     "antv",
     "g2plot",
-    "ecahrts",
+    "echarts",
     "visualization",
     "react-component"
   ],
@@ -46,6 +48,7 @@
     "@types/react-dom": "^16.9.3",
     "copy-webpack-plugin": "^5.1.1",
     "cross-env": "^5.1.3",
+    "gh-pages": "^3.0.0",
     "husky": "^3.0.9",
     "jest": "^24.9.0",
     "jest-electron": "^0.1.7",
@@ -62,7 +65,7 @@
   },
   "peerDependencies": {
     "@antv/g2plot": "*",
-    "react": "^0.14.0 || ^15.0.0 || ^16.0.0"
+    "react": ">= 16.8.0"
   },
   "lint-staged": {
     "*.{ts,tsx}": [

package.json

@@ -1,5 +1,4 @@
-import React, { PureComponent } from 'react';
-import { debounce, get, size } from './helper';
+import React, { useEffect, useRef, forwardRef } from 'react';
 
 export type ReactG2PlotProps = {
   readonly className?: string;
@@ -10,76 +9,49 @@ export type ReactG2PlotProps = {
 /**
  * 一个基本可用的 G2Plot React 组件
  */
-export default class extends PureComponent<ReactG2PlotProps> {
-  /** container */
-  private $dom: HTMLElement;
-  /** G2Plot Ctor */
-  private plot: any;
+export default forwardRef((props: ReactG2PlotProps, ref: any) => {
+  const { className, Ctor, config } = props;
+
+  const $dom = useRef(undefined);
+  const plotRef = useRef(undefined);
 
   /**
-   * get G2Plot instance
+   * 同步 forward ref
+   * @param source
+   * @param target
    */
-  public getPlot() {
-    return this.plot;
-  }
-
-  componentDidMount() {
-    this.newPlot();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { Ctor, config } = prevProps;
-
-    if (size(get(this.props, ['config', 'data'])) && JSON.stringify(this.props.config) !== JSON.stringify(config)) {
-      // 只有有数据的时候才去渲染
-      // 构造函数变化，则重新创建；或者 chart 不存在
-      if (this.props.Ctor !== Ctor || !this.plot) {
-        this.newPlot();
-      } else {
-        this.updatePlot();
-      }
+  function syncRef(source, target) {
+    if (typeof target === 'function') {
+      target(source.current);
+    } else if (target) {
+      target.current = source.current;
     }
   }
 
   /**
-   * 创建 chart
+   * 创建
    */
-  private newPlot() {
-    const { Ctor, config } = this.props;
-
-    if (this.plot) {
-      this.plot.destroy();
-      this.plot = undefined;
+  function newPlot() {
+    if (plotRef.current) {
+      plotRef.current.destroy();
     }
 
-    this.plot = new Ctor(this.$dom, config);
-
-    this.batchRender();
-  }
+    plotRef.current = new Ctor($dom.current, config);
 
-  /**
-   * 更新 chart
-   */
-  private updatePlot() {
-    if (this.plot) {
-      this.plot.updateConfig(this.props.config);
+    syncRef(plotRef, ref);
 
-      this.batchRender();
-    }
+    plotRef.current.render();
   }
 
-  /**
-   * 对 chart.render 加上 debounce
-   */
-  private batchRender = debounce(() => {
-    if (this.plot) {
-      this.plot.render();
-    }
-  });
+  useEffect(() => {
+    newPlot();
 
-  render() {
-    const { className } = this.props;
+    return () => {
+      if (plotRef.current) {
+        plotRef.current.destroy();
+      }
+    };
+  }, [Ctor, config]);
 
-    return <div className={className} ref={(e) => (this.$dom = e)} />;
-  }
-}
+  return <div className={className} ref={$dom} />;
+});