Update Artplayer.js

packages/artplayer/examples/react/Artplayer.js

@@ -1,36 +1,26 @@
-import React from 'react';
+// eslint-disable-next-line no-unused-vars
+import React, { useEffect, useRef } from 'react';
 import Artplayer from 'artplayer';
 
-export default class ArtplayerReact extends React.Component {
+export default function ({ option, getInstance, ...rest }) {
-    constructor(props) {
+    const artRef = useRef();
-        super(props);
-        this.instance = null;
-        this.artRef = React.createRef();
-    }
 
-    componentDidMount() {
+    useEffect(() => {
-        const { option, getInstance } = this.props;
+        const art = new Artplayer({
-        this.instance = new Artplayer({
             ...option,
-            container: this.artRef.current,
+            container: artRef.current,
         });
 
         if (getInstance && typeof getInstance === 'function') {
-            getInstance(this.instance);
+            getInstance(art);
         }
-    }
 
-    componentWillUnmount() {
+        return () => {
-        if (this.instance && this.instance.destroy) {
+            if (art && art.destroy) {
-            this.instance.destroy();
+                art.destroy(false);
-        }
+            }
-    }
+        };
+    }, [option, getInstance]);
 
-    render() {
+    return <div ref={artRef} {...rest}></div>;
-        const { option, getInstance, ...rest } = this.props;
-        return React.createElement('div', {
-            ref: this.artRef,
-            ...rest,
-        });
-    }
 }