From 8fa763b9c7fb73133097b7d8ef969cf229dd7f48 Mon Sep 17 00:00:00 2001
From: Harvey Zack <laozhaochaguan@gmail.com>
Date: Tue, 3 May 2022 10:20:51 +0800
Subject: [PATCH] Update Artplayer.js

---
 .../artplayer/examples/react/Artplayer.js     | 40 +++++++------------
 1 file changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/artplayer/examples/react/Artplayer.js b/packages/artplayer/examples/react/Artplayer.js
index 6116d059a..6e01f20d1 100644
--- a/packages/artplayer/examples/react/Artplayer.js
+++ b/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 {
-    constructor(props) {
-        super(props);
-        this.instance = null;
-        this.artRef = React.createRef();
-    }
+export default function ({ option, getInstance, ...rest }) {
+    const artRef = useRef();
 
-    componentDidMount() {
-        const { option, getInstance } = this.props;
-        this.instance = new Artplayer({
+    useEffect(() => {
+        const art = new Artplayer({
             ...option,
-            container: this.artRef.current,
+            container: artRef.current,
         });
 
         if (getInstance && typeof getInstance === 'function') {
-            getInstance(this.instance);
+            getInstance(art);
         }
-    }
 
-    componentWillUnmount() {
-        if (this.instance && this.instance.destroy) {
-            this.instance.destroy();
-        }
-    }
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, [option, getInstance]);
 
-    render() {
-        const { option, getInstance, ...rest } = this.props;
-        return React.createElement('div', {
-            ref: this.artRef,
-            ...rest,
-        });
-    }
+    return <div ref={artRef} {...rest}></div>;
 }