fix: 修复排名页组件的加载和卸载逻辑

当通过前端路由跳转到排名页面时,不会加载预测组件
因为原先只是通过`window.onload`来加载组件的
通过实现自定义的监听 url 改变事件
当 url 发生改变时,根据需要加载和卸载组件

Author: XYShaoKang

src/content/pages/ranking/Item.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 
 import { useGetPredictionQuery } from './rankSlice'
 
@@ -20,28 +20,14 @@ function getParam() {
 }
 
 function useUrlChange() {
-  const oldUrl = useRef(location.href)
   const [param, setParam] = useState(getParam())
   useEffect(() => {
-    const body = document.querySelector('body')!
-
-    const observer = new MutationObserver(function (mutations) {
-      mutations.forEach(function (_mutation) {
-        if (oldUrl.current != location.href) {
-          oldUrl.current = location.href
-          setParam(getParam())
-        }
-      })
-    })
-
-    const config = {
-      childList: true,
-      subtree: true,
+    const handle = () => {
+      setParam(getParam())
     }
-
-    observer.observe(body, config)
+    window.addEventListener('afterurlchange', handle)
     return () => {
-      observer.disconnect()
+      window.removeEventListener('afterurlchange', handle)
     }
   }, [])
   useEffect(() => {

src/content/pages/ranking/index.tsx

@@ -1,20 +1,22 @@
 import { StrictMode } from 'react'
-import { render } from 'react-dom'
+import ReactDom, { render } from 'react-dom'
 import { Provider } from 'react-redux'
 
 import { getElement } from '../../utils'
 import Item from './Item'
 import Title from './Title'
 
 import store from '../../app/store'
+import { initUrlChangeEvent } from '../utils'
 
-const reg = /https:\/\/leetcode-cn\.com\/contest\/([\d\D]+)\/ranking\//
+let nodes: HTMLTableCellElement[] = []
 
 async function loadTitle() {
   const parent = await getElement('.table-responsive>table>thead>tr')
 
   if (parent.length > 0) {
     const root = document.createElement('th')
+    nodes.push(root)
     parent[0].append(root)
     render(
       <StrictMode>
@@ -25,26 +27,60 @@ async function loadTitle() {
   }
 }
 
-if (reg.test(location.href)) {
-  window.onload = async () => {
-    loadTitle()
+async function loadPredictor() {
+  loadTitle()
 
-    const trs = await getElement('.table-responsive>table>tbody>tr')
-
-    const start = trs[0].className === 'success' ? 1 : 0
-    trs.forEach((tr, i) => {
-      const root = document.createElement('td')
+  const trs = await getElement('.table-responsive>table>tbody>tr')
+  const start = trs[0].className === 'success' ? 1 : 0
+  trs.forEach((tr, i) => {
+    const root = document.createElement('td')
+    nodes.push(root)
+    render(
+      <StrictMode>
+        <Provider store={store}>
+          <Item index={i - start} />
+        </Provider>
+      </StrictMode>,
+      root
+    )
 
-      render(
-        <StrictMode>
-          <Provider store={store}>
-            <Item index={i - start} />
-          </Provider>
-        </StrictMode>,
-        root
-      )
+    tr.append(root)
+  })
+}
 
-      tr.append(root)
-    })
+const urlMatchReg = /https:\/\/leetcode-cn\.com\/contest\/([\d\D]+)\/ranking\//
+window.onload = () => {
+  if (urlMatchReg.test(location.href)) {
+    loadPredictor()
   }
 }
+
+initUrlChangeEvent()
+
+window.addEventListener('urlchange', function () {
+  /**
+   * url 变化,可能会有四种情况:
+   * 1. 从不匹配的地址跳转到匹配的地址
+   * 2. 从匹配的地址跳转到不匹配的地址
+   * 3. 从匹配的地址跳转到不匹配的地址
+   * 4. 从不匹配的地址跳转到不匹配的地址
+   *
+   * 其中需要做处理的是
+   * 第一种情况需要加载组件
+   * 第二种情况需要卸载组件
+   * 而第三第四种清理可以不用处理
+   */
+
+  if (!urlMatchReg.test(location.href)) {
+    // 从排名页跳转到比赛主页
+    nodes.forEach(node => ReactDom.unmountComponentAtNode(node))
+    nodes = []
+  } else {
+    // 从主页跳转到排名页
+    if (nodes.length === 0) {
+      loadPredictor()
+    } else {
+      window.dispatchEvent(new Event('afterurlchange'))
+    }
+  }
+})

src/content/pages/utils.ts

@@ -0,0 +1,28 @@
+// 添加监听 url 变化的事件
+const initUrlChangeEvent = (() => {
+  let isLoad = false
+  const load = () => {
+    if (isLoad) return
+    isLoad = true
+
+    const oldPushState = history.pushState
+    const oldReplaceState = history.replaceState
+
+    history.pushState = function pushState(...args) {
+      oldPushState.apply(window, args)
+      window.dispatchEvent(new Event('urlchange'))
+    }
+
+    history.replaceState = function replaceState(...args) {
+      oldReplaceState.apply(window, args)
+      window.dispatchEvent(new Event('urlchange'))
+    }
+
+    window.addEventListener('popstate', () => {
+      window.dispatchEvent(new Event('urlchange'))
+    })
+  }
+  return load
+})()
+
+export { initUrlChangeEvent }