减少重复请求

components/WalineComponent.js

@@ -4,31 +4,33 @@ import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 
 const path = ''
-
+let waline = null
 /**
  * @see https://waline.js.org/guide/get-started.html
  * @param {*} props
  * @returns
  */
 const WalineComponent = (props) => {
-  const walineInstanceRef = React.useRef(null)
   const containerRef = React.createRef()
   const router = useRouter()
 
   const updateWaline = url => {
     if (url !== path) {
-      walineInstanceRef.current?.update(props)
+      waline.update(props)
     }
   }
 
   React.useEffect(() => {
-    walineInstanceRef.current = init({
-      ...props,
-      el: containerRef.current,
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL
-    })
-    router.events.on('routeChangeComplete', updateWaline)
+    if (!waline) {
+      waline = init({
+        ...props,
+        el: containerRef.current,
+        serverURL: BLOG.COMMENT_WALINE_SERVER_URL
+      })
+    }
 
+    // 跳转评论
+    router.events.on('routeChangeComplete', updateWaline)
     const anchor = window.location.hash
     if (anchor) {
       // 选择需要观察变动的节点
@@ -58,7 +60,8 @@ const WalineComponent = (props) => {
     }
 
     return () => {
-      walineInstanceRef.current?.destroy()
+      waline.destroy()
+      waline = null
       router.events.off('routeChangeComplete', updateWaline)
     }
   }, [])