fix(ranking): 优化性能

Author: XYShaoKang

src/content/pages/ranking/App.tsx

@@ -50,17 +50,15 @@ const App: FC = () => {
       )}
       {(showPredictordelta || showNewRating) &&
         rows?.map((row, i) => (
-          <Portal container={row} key={i}>
-            <td>
-              <Item
-                row={i}
-                hasMyRank={hasMyRank}
-                showOldRating={showOldRating}
-                showPredictordelta={showPredictordelta}
-                showNewRating={showNewRating}
-              />
-            </td>
-          </Portal>
+          <Item
+            key={i}
+            row={row}
+            index={i}
+            hasMyRank={hasMyRank}
+            showOldRating={showOldRating}
+            showPredictordelta={showPredictordelta}
+            showNewRating={showNewRating}
+          />
         ))}
       {showLanguageIcon &&
         rows?.map((row, i) => (

src/content/pages/ranking/Item.tsx

@@ -1,12 +1,13 @@
-import { FC, useEffect, useState } from 'react'
+import { Portal } from '@/components/Portal'
+import { FC, memo, useEffect, useState } from 'react'
 import { css } from 'styled-components/macro'
 
 import { debounce } from '../../../utils'
 
 import { ParamType, useGetPredictionQuery } from './rankSlice'
 
 type ItmeType = {
-  row: number
+  index: number
   hasMyRank: boolean
   showOldRating: boolean
   showPredictordelta: boolean
@@ -52,13 +53,13 @@ function useUrlChange() {
   return [param] as const
 }
 
-const Item: FC<ItmeType> = ({
-  row,
+const Item: FC<ItmeType> = memo(function Item({
+  index,
   hasMyRank,
   showOldRating,
   showPredictordelta,
   showNewRating,
-}) => {
+}) {
   const [param] = useUrlChange()
   const params: ParamType = { ...param }
   if (hasMyRank) {
@@ -72,9 +73,9 @@ const Item: FC<ItmeType> = ({
     return <span> ...loading</span>
   }
 
-  const predictor: number | undefined = items?.[row]?.delta?.toFixed(1),
-    newRating = items?.[row]?.newRating?.toFixed(1),
-    oldRating = items?.[row]?.oldRating?.toFixed(1)
+  const predictor: number | undefined = items?.[index]?.delta?.toFixed(1),
+    newRating = items?.[index]?.newRating?.toFixed(1),
+    oldRating = items?.[index]?.oldRating?.toFixed(1)
 
   if (predictor === undefined) {
     return <></>
@@ -123,6 +124,27 @@ const Item: FC<ItmeType> = ({
       )}
     </div>
   )
+})
+interface PredictItemProps {
+  row: HTMLElement
+  index: number
+  hasMyRank: boolean
+  showOldRating: boolean
+  showPredictordelta: boolean
+  showNewRating: boolean
 }
 
-export default Item
+const PredictItem = memo(function PredictItem({
+  row,
+  ...props
+}: PredictItemProps) {
+  return (
+    <Portal container={row}>
+      <td>
+        <Item {...props} />
+      </td>
+    </Portal>
+  )
+})
+
+export default PredictItem

src/content/pages/ranking/LanguageIcon.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, memo, useEffect, useState } from 'react'
 import styled from 'styled-components/macro'
 
 import { debounce } from '../../../utils'
@@ -144,7 +144,7 @@ export const LanguageIconRow: FC<{
   row: HTMLElement
   i: number
   hasMyRank: boolean
-}> = ({ row, i, hasMyRank }) => {
+}> = memo(function LanguageIconRow({ row, i, hasMyRank }) {
   const tds = Array.prototype.slice.call(row.children, 4, 8)
   return (
     <>
@@ -159,6 +159,6 @@ export const LanguageIconRow: FC<{
       ))}
     </>
   )
-}
+})
 
 export default LanguageIcon