refactor: improve proxy page performance

src/renderer/src/components/proxies/proxy-item.tsx

@@ -1,7 +1,6 @@
 import { Button, Card, CardBody } from '@heroui/react'
 import { mihomoUnfixedProxy } from '@renderer/utils/ipc'
-import React from 'react'
+import React, { useMemo, useState, useCallback } from 'react'
-import { useMemo, useState } from 'react'
 import { FaMapPin } from 'react-icons/fa6'
 import { useTranslation } from 'react-i18next'
 
@@ -16,7 +15,14 @@ interface Props {
   isGroupTesting?: boolean
 }
 
-const ProxyItem: React.FC<Props> = (props) => {
+function delayColor(delay: number): 'primary' | 'success' | 'warning' | 'danger' {
+  if (delay === -1) return 'primary'
+  if (delay === 0) return 'danger'
+  if (delay < 500) return 'success'
+  return 'warning'
+}
+
+const ProxyItem: React.FC<Props> = React.memo((props) => {
   const { t } = useTranslation()
   const { mutateProxies, proxyDisplayMode, group, proxy, selected, onSelect, onProxyDelay, isGroupTesting = false } = props
 
@@ -25,34 +31,27 @@ const ProxyItem: React.FC<Props> = (props) => {
       return proxy.history[proxy.history.length - 1].delay
     }
     return -1
-  }, [proxy])
+  }, [proxy.history])
 
   const [loading, setLoading] = useState(false)
 
   const isLoading = loading || isGroupTesting
 
-  function delayColor(delay: number): 'primary' | 'success' | 'warning' | 'danger' {
+  const delayText = useMemo(() => {
-    if (delay === -1) return 'primary'
-    if (delay === 0) return 'danger'
-    if (delay < 500) return 'success'
-    return 'warning'
-  }
-
-  function delayText(delay: number): string {
     if (delay === -1) return t('proxies.delay.test')
     if (delay === 0) return t('proxies.delay.timeout')
     return delay.toString()
-  }
+  }, [delay, t])
 
-  const onDelay = (): void => {
+  const onDelay = useCallback((): void => {
     setLoading(true)
     onProxyDelay(proxy.name, group.testUrl).finally(() => {
       mutateProxies()
       setLoading(false)
     })
-  }
+  }, [proxy.name, group.testUrl, onProxyDelay, mutateProxies])
 
-  const fixed = group.fixed && group.fixed === proxy.name
+  const fixed = useMemo(() => group.fixed && group.fixed === proxy.name, [group.fixed, proxy.name])
 
   return (
     <Card
@@ -118,7 +117,7 @@ const ProxyItem: React.FC<Props> = (props) => {
                 className="h-full text-sm ml-auto -mt-0.5 px-2 relative w-min whitespace-nowrap"
               >
                 <div className="w-full h-full flex items-center justify-end">
-                  {delayText(delay)}
+                  {delayText}
                 </div>
               </Button>
             </div>
@@ -156,7 +155,7 @@ const ProxyItem: React.FC<Props> = (props) => {
               className="h-full text-sm px-2 relative w-min whitespace-nowrap"
             >
               <div className="w-full h-full flex items-center justify-end">
-                {delayText(delay)}
+                {delayText}
               </div>
             </Button>
           </div>
@@ -165,6 +164,18 @@ const ProxyItem: React.FC<Props> = (props) => {
       </CardBody>
     </Card>
   )
-}
+}, (prevProps, nextProps) => {
+  // 必要时重新渲染
+  return (
+    prevProps.proxy.name === nextProps.proxy.name &&
+    prevProps.proxy.history === nextProps.proxy.history &&
+    prevProps.selected === nextProps.selected &&
+    prevProps.proxyDisplayMode === nextProps.proxyDisplayMode &&
+    prevProps.group.fixed === nextProps.group.fixed &&
+    prevProps.isGroupTesting === nextProps.isGroupTesting
+  )
+})
+
+ProxyItem.displayName = 'ProxyItem'
 
 export default ProxyItem

src/renderer/src/pages/proxies.tsx

@@ -26,11 +26,11 @@ const GROUP_EXPAND_STATE_KEY = 'proxy_group_expand_state'
 
 // 自定义 hook 用于管理展开状态
 const useProxyState = (groups: IMihomoMixedGroup[]): {
-  virtuosoRef: React.RefObject<GroupedVirtuosoHandle>;
+  virtuosoRef: React.RefObject<GroupedVirtuosoHandle | null>;
   isOpen: boolean[];
   setIsOpen: React.Dispatch<React.SetStateAction<boolean[]>>;
 } => {
-  const virtuosoRef = useRef<GroupedVirtuosoHandle>(null)
+  const virtuosoRef = useRef<GroupedVirtuosoHandle | null>(null)
   
   // 初始化展开状态
   const [isOpen, setIsOpen] = useState<boolean[]>(() => {
@@ -76,39 +76,55 @@ const Proxies: React.FC = () => {
   const [cols, setCols] = useState(1)
   const { virtuosoRef, isOpen, setIsOpen } = useProxyState(groups)
   const [delaying, setDelaying] = useState(Array(groups.length).fill(false))
-  const [proxyDelaying, setProxyDelaying] = useState<Record<string, boolean>>({})
+  const [proxyDelaying, setProxyDelaying] = useState<Set<string>>(new Set())
   const [searchValue, setSearchValue] = useState(Array(groups.length).fill(''))
+
+  // searchValue 初始化
+  useEffect(() => {
+    if (groups.length !== searchValue.length) {
+      setSearchValue(Array(groups.length).fill(''))
+    }
+  }, [groups.length])
+
+  // 代理列表排序
+  const sortProxies = useCallback((proxies: (IMihomoProxy | IMihomoGroup)[], order: string) => {
+    if (order === 'delay') {
+      return [...proxies].sort((a, b) => {
+        if (a.history.length === 0) return 1
+        if (b.history.length === 0) return -1
+        const aDelay = a.history[a.history.length - 1].delay
+        const bDelay = b.history[b.history.length - 1].delay
+        if (aDelay === 0) return 1
+        if (bDelay === 0) return -1
+        return aDelay - bDelay
+      })
+    }
+    if (order === 'name') {
+      return [...proxies].sort((a, b) => a.name.localeCompare(b.name))
+    }
+    return proxies
+  }, [])
+
   const { groupCounts, allProxies } = useMemo(() => {
     const groupCounts: number[] = []
     const allProxies: (IMihomoProxy | IMihomoGroup)[][] = []
-    if (groups.length !== searchValue.length) setSearchValue(Array(groups.length).fill(''))
+
     groups.forEach((group, index) => {
       if (isOpen[index]) {
-        let groupProxies = group.all.filter(
+        const filtered = group.all.filter(
           (proxy) => proxy && includesIgnoreCase(proxy.name, searchValue[index])
         )
-        const count = Math.floor(groupProxies.length / cols)
+        const sorted = sortProxies(filtered, proxyDisplayOrder)
-        groupCounts.push(groupProxies.length % cols === 0 ? count : count + 1)
+        const count = Math.ceil(sorted.length / cols)
-        if (proxyDisplayOrder === 'delay') {
+        groupCounts.push(count)
-          groupProxies = groupProxies.sort((a, b) => {
+        allProxies.push(sorted)
-            if (a.history.length === 0) return -1
-            if (b.history.length === 0) return 1
-            if (a.history[a.history.length - 1].delay === 0) return 1
-            if (b.history[b.history.length - 1].delay === 0) return -1
-            return a.history[a.history.length - 1].delay - b.history[b.history.length - 1].delay
-          })
-        }
-        if (proxyDisplayOrder === 'name') {
-          groupProxies = groupProxies.sort((a, b) => a.name.localeCompare(b.name))
-        }
-        allProxies.push(groupProxies)
       } else {
         groupCounts.push(0)
         allProxies.push([])
       }
     })
     return { groupCounts, allProxies }
-  }, [groups, isOpen, proxyDisplayOrder, cols, searchValue])
+  }, [groups, isOpen, proxyDisplayOrder, cols, searchValue, sortProxies])
 
   const onChangeProxy = useCallback(async (group: string, proxy: string): Promise<void> => {
     await mihomoChangeProxy(group, proxy)
@@ -136,14 +152,12 @@ const Proxies: React.FC = () => {
       return newDelaying
     })
 
-    // 本组测试状态
+    // 管理测试状态
     const groupProxies = allProxies[index]
     setProxyDelaying((prev) => {
-      const newProxyDelaying = { ...prev }
+      const newSet = new Set(prev)
-      groupProxies.forEach(proxy => {
+      groupProxies.forEach(proxy => newSet.add(proxy.name))
-        newProxyDelaying[proxy.name] = true
+      return newSet
-      })
-      return newProxyDelaying
     })
 
     try {
@@ -157,11 +171,11 @@ const Proxies: React.FC = () => {
           } catch {
             // ignore
           } finally {
-            // 立即更新状态
+            // 更新状态
             setProxyDelaying((prev) => {
-              const newProxyDelaying = { ...prev }
+              const newSet = new Set(prev)
-              delete newProxyDelaying[proxy.name]
+              newSet.delete(proxy.name)
-              return newProxyDelaying
+              return newSet
             })
             mutate()
           }
@@ -184,14 +198,12 @@ const Proxies: React.FC = () => {
       })
       // 状态清理
       setProxyDelaying((prev) => {
-        const newProxyDelaying = { ...prev }
+        const newSet = new Set(prev)
-        groupProxies.forEach(proxy => {
+        groupProxies.forEach(proxy => newSet.delete(proxy.name))
-          delete newProxyDelaying[proxy.name]
+        return newSet
-        })
-        return newProxyDelaying
       })
     }
-  }, [allProxies, groups, delayTestConcurrency, mutate])
+  }, [allProxies, groups, delayTestConcurrency, mutate, setIsOpen])
 
   const calcCols = useCallback((): number => {
     if (proxyCols !== 'auto') {
@@ -216,6 +228,197 @@ const Proxies: React.FC = () => {
     }
   }, [calcCols])
 
+  // 预加载图片
+  useEffect(() => {
+    const loadImages = async (): Promise<void> => {
+      const imagesToLoad: string[] = []
+      groups.forEach((group) => {
+        if (group.icon && group.icon.startsWith('http') && !localStorage.getItem(group.icon)) {
+          imagesToLoad.push(group.icon)
+        }
+      })
+
+      if (imagesToLoad.length > 0) {
+        const promises = imagesToLoad.map(async (url) => {
+          try {
+            const dataURL = await getImageDataURL(url)
+            localStorage.setItem(url, dataURL)
+          } catch (error) {
+            console.error('Failed to load image:', url, error)
+          }
+        })
+        await Promise.all(promises)
+        mutate()
+      }
+    }
+    loadImages()
+  }, [groups, mutate])
+
+  const renderGroupContent = useCallback((index: number) => {
+    return groups[index] ? (
+      <div
+        className={`w-full pt-2 ${index === groupCounts.length - 1 && !isOpen[index] ? 'pb-2' : ''} px-2`}
+      >
+        <Card
+          as="div"
+          isPressable
+          fullWidth
+          onPress={() => {
+            setIsOpen((prev) => {
+              const newOpen = [...prev]
+              newOpen[index] = !prev[index]
+              return newOpen
+            })
+          }}
+        >
+          <CardBody className="w-full">
+            <div className="flex justify-between">
+              <div className="flex text-ellipsis overflow-hidden whitespace-nowrap">
+                {groups[index].icon ? (
+                  <Avatar
+                    className="bg-transparent mr-2"
+                    size="sm"
+                    radius="sm"
+                    src={
+                      groups[index].icon.startsWith('<svg')
+                        ? `data:image/svg+xml;utf8,${groups[index].icon}`
+                        : localStorage.getItem(groups[index].icon) || groups[index].icon
+                    }
+                  />
+                ) : null}
+                <div className="text-ellipsis overflow-hidden whitespace-nowrap">
+                  <div
+                    title={groups[index].name}
+                    className="inline flag-emoji h-[32px] text-md leading-[32px]"
+                  >
+                    {groups[index].name}
+                  </div>
+                  {proxyDisplayMode === 'full' && (
+                    <div
+                      title={groups[index].type}
+                      className="inline ml-2 text-sm text-foreground-500"
+                    >
+                      {groups[index].type}
+                    </div>
+                  )}
+                  {proxyDisplayMode === 'full' && (
+                    <div className="inline flag-emoji ml-2 text-sm text-foreground-500">
+                      {groups[index].now}
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="flex">
+                {proxyDisplayMode === 'full' && (
+                  <Chip size="sm" className="my-1 mr-2">
+                    {groups[index].all.length}
+                  </Chip>
+                )}
+                <CollapseInput
+                  title={t('proxies.search.placeholder')}
+                  value={searchValue[index]}
+                  onValueChange={(v) => {
+                    setSearchValue((prev) => {
+                      const newSearchValue = [...prev]
+                      newSearchValue[index] = v
+                      return newSearchValue
+                    })
+                  }}
+                />
+                <Button
+                  title={t('proxies.locate')}
+                  variant="light"
+                  size="sm"
+                  isIconOnly
+                  onPress={() => {
+                    if (!isOpen[index]) {
+                      setIsOpen((prev) => {
+                        const newOpen = [...prev]
+                        newOpen[index] = true
+                        return newOpen
+                      })
+                    }
+                    let i = 0
+                    for (let j = 0; j < index; j++) {
+                      i += groupCounts[j]
+                    }
+                    i += Math.floor(
+                      allProxies[index].findIndex(
+                        (proxy) => proxy.name === groups[index].now
+                      ) / cols
+                    )
+                    virtuosoRef.current?.scrollToIndex({
+                      index: Math.floor(i),
+                      align: 'start'
+                    })
+                  }}
+                >
+                  <FaLocationCrosshairs className="text-lg text-foreground-500" />
+                </Button>
+                <Button
+                  title={t('proxies.delay.test')}
+                  variant="light"
+                  isLoading={delaying[index]}
+                  size="sm"
+                  isIconOnly
+                  onPress={() => {
+                    onGroupDelay(index)
+                  }}
+                >
+                  <MdOutlineSpeed className="text-lg text-foreground-500" />
+                </Button>
+                <IoIosArrowBack
+                  className={`transition duration-200 ml-2 h-[32px] text-lg text-foreground-500 ${isOpen[index] ? '-rotate-90' : ''}`}
+                />
+              </div>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+    ) : (
+      <div>Never See This</div>
+    )
+  }, [groups, groupCounts, isOpen, proxyDisplayMode, searchValue, delaying, cols, allProxies, virtuosoRef, t, setIsOpen, onGroupDelay])
+
+  const renderItemContent = useCallback((index: number, groupIndex: number) => {
+    let innerIndex = index
+    groupCounts.slice(0, groupIndex).forEach((count) => {
+      innerIndex -= count
+    })
+    return allProxies[groupIndex] ? (
+      <div
+        style={
+          proxyCols !== 'auto'
+            ? { gridTemplateColumns: `repeat(${proxyCols}, minmax(0, 1fr))` }
+            : {}
+        }
+        className={`grid ${proxyCols === 'auto' ? 'sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' : ''} ${groupIndex === groupCounts.length - 1 && innerIndex === groupCounts[groupIndex] - 1 ? 'pb-2' : ''} gap-2 pt-2 mx-2`}
+      >
+        {Array.from({ length: cols }).map((_, i) => {
+          if (!allProxies[groupIndex][innerIndex * cols + i]) return null
+          return (
+            <ProxyItem
+              key={allProxies[groupIndex][innerIndex * cols + i].name}
+              mutateProxies={mutate}
+              onProxyDelay={onProxyDelay}
+              onSelect={onChangeProxy}
+              proxy={allProxies[groupIndex][innerIndex * cols + i]}
+              group={groups[groupIndex]}
+              proxyDisplayMode={proxyDisplayMode}
+              selected={
+                allProxies[groupIndex][innerIndex * cols + i]?.name ===
+                groups[groupIndex].now
+              }
+              isGroupTesting={proxyDelaying.has(allProxies[groupIndex][innerIndex * cols + i].name)}
+            />
+          )
+        })}
+      </div>
+    ) : (
+      <div>Never See This</div>
+    )
+  }, [groupCounts, allProxies, proxyCols, cols, groups, proxyDisplayMode, proxyDelaying, mutate, onProxyDelay, onChangeProxy])
+
   return (
     <BasePage
       title={t('proxies.title')}
@@ -278,191 +481,11 @@ const Proxies: React.FC = () => {
             ref={virtuosoRef}
             groupCounts={groupCounts}
             defaultItemHeight={80}
-            increaseViewportBy={{ top: 300, bottom: 300 }}
+            increaseViewportBy={{ top: 150, bottom: 150 }}
-            overscan={500}
+            overscan={200}
-            computeItemKey={(index, groupIndex) => {
+            computeItemKey={(index, groupIndex) => `${groupIndex}-${index}`}
-              let innerIndex = index
+            groupContent={renderGroupContent}
-              groupCounts.slice(0, groupIndex).forEach((count) => {
+            itemContent={renderItemContent}
-                innerIndex -= count
-              })
-              const proxyIndex = innerIndex * cols
-              const proxy = allProxies[groupIndex]?.[proxyIndex]
-              return proxy ? `${groupIndex}-${proxy.name}` : `${groupIndex}-${index}`
-            }}
-            groupContent={(index) => {
-              if (
-                groups[index] &&
-                groups[index].icon &&
-                groups[index].icon.startsWith('http') &&
-                !localStorage.getItem(groups[index].icon)
-              ) {
-                getImageDataURL(groups[index].icon).then((dataURL) => {
-                  localStorage.setItem(groups[index].icon, dataURL)
-                  mutate()
-                })
-              }
-              return groups[index] ? (
-                <div
-                  className={`w-full pt-2 ${index === groupCounts.length - 1 && !isOpen[index] ? 'pb-2' : ''} px-2`}
-                >
-                  <Card
-                    as="div"
-                    isPressable
-                    fullWidth
-                    onPress={() => {
-                      setIsOpen((prev) => {
-                        const newOpen = [...prev]
-                        newOpen[index] = !prev[index]
-                        return newOpen
-                      })
-                    }}
-                  >
-                    <CardBody className="w-full">
-                      <div className="flex justify-between">
-                        <div className="flex text-ellipsis overflow-hidden whitespace-nowrap">
-                          {groups[index].icon ? (
-                            <Avatar
-                              className="bg-transparent mr-2"
-                              size="sm"
-                              radius="sm"
-                              src={
-                                groups[index].icon.startsWith('<svg')
-                                  ? `data:image/svg+xml;utf8,${groups[index].icon}`
-                                  : localStorage.getItem(groups[index].icon) || groups[index].icon
-                              }
-                            />
-                          ) : null}
-                          <div className="text-ellipsis overflow-hidden whitespace-nowrap">
-                            <div
-                              title={groups[index].name}
-                              className="inline flag-emoji h-[32px] text-md leading-[32px]"
-                            >
-                              {groups[index].name}
-                            </div>
-                            {proxyDisplayMode === 'full' && (
-                              <div
-                                title={groups[index].type}
-                                className="inline ml-2 text-sm text-foreground-500"
-                              >
-                                {groups[index].type}
-                              </div>
-                            )}
-                            {proxyDisplayMode === 'full' && (
-                              <div className="inline flag-emoji ml-2 text-sm text-foreground-500">
-                                {groups[index].now}
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                        <div className="flex">
-                          {proxyDisplayMode === 'full' && (
-                            <Chip size="sm" className="my-1 mr-2">
-                              {groups[index].all.length}
-                            </Chip>
-                          )}
-                          <CollapseInput
-                              title={t('proxies.search.placeholder')}
-                            value={searchValue[index]}
-                            onValueChange={(v) => {
-                              setSearchValue((prev) => {
-                                const newSearchValue = [...prev]
-                                newSearchValue[index] = v
-                                return newSearchValue
-                              })
-                            }}
-                          />
-                          <Button
-                              title={t('proxies.locate')}
-                            variant="light"
-                            size="sm"
-                            isIconOnly
-                            onPress={() => {
-                              if (!isOpen[index]) {
-                                setIsOpen((prev) => {
-                                  const newOpen = [...prev]
-                                  newOpen[index] = true
-                                  return newOpen
-                                })
-                              }
-                              let i = 0
-                              for (let j = 0; j < index; j++) {
-                                i += groupCounts[j]
-                              }
-                              i += Math.floor(
-                                allProxies[index].findIndex(
-                                  (proxy) => proxy.name === groups[index].now
-                                ) / cols
-                              )
-                              virtuosoRef.current?.scrollToIndex({
-                                index: Math.floor(i),
-                                align: 'start'
-                              })
-                            }}
-                          >
-                            <FaLocationCrosshairs className="text-lg text-foreground-500" />
-                          </Button>
-                          <Button
-                              title={t('proxies.delay.test')}
-                            variant="light"
-                            isLoading={delaying[index]}
-                            size="sm"
-                            isIconOnly
-                            onPress={() => {
-                              onGroupDelay(index)
-                            }}
-                          >
-                            <MdOutlineSpeed className="text-lg text-foreground-500" />
-                          </Button>
-                          <IoIosArrowBack
-                            className={`transition duration-200 ml-2 h-[32px] text-lg text-foreground-500 ${isOpen[index] ? '-rotate-90' : ''}`}
-                          />
-                        </div>
-                      </div>
-                    </CardBody>
-                  </Card>
-                </div>
-              ) : (
-                <div>Never See This</div>
-              )
-            }}
-            itemContent={(index, groupIndex) => {
-              let innerIndex = index
-              groupCounts.slice(0, groupIndex).forEach((count) => {
-                innerIndex -= count
-              })
-              return allProxies[groupIndex] ? (
-                <div
-                  style={
-                    proxyCols !== 'auto'
-                      ? { gridTemplateColumns: `repeat(${proxyCols}, minmax(0, 1fr))` }
-                      : {}
-                  }
-                  className={`grid ${proxyCols === 'auto' ? 'sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5' : ''} ${groupIndex === groupCounts.length - 1 && innerIndex === groupCounts[groupIndex] - 1 ? 'pb-2' : ''} gap-2 pt-2 mx-2`}
-                >
-                  {Array.from({ length: cols }).map((_, i) => {
-                    if (!allProxies[groupIndex][innerIndex * cols + i]) return null
-                    return (
-                      <ProxyItem
-                        key={allProxies[groupIndex][innerIndex * cols + i].name}
-                        mutateProxies={mutate}
-                        onProxyDelay={onProxyDelay}
-                        onSelect={onChangeProxy}
-                        proxy={allProxies[groupIndex][innerIndex * cols + i]}
-                        group={groups[groupIndex]}
-                        proxyDisplayMode={proxyDisplayMode}
-                        selected={
-                          allProxies[groupIndex][innerIndex * cols + i]?.name ===
-                          groups[groupIndex].now
-                        }
-                        isGroupTesting={!!proxyDelaying[allProxies[groupIndex][innerIndex * cols + i].name]}
-                      />
-                    )
-                  })}
-                </div>
-              ) : (
-                <div>Never See This</div>
-              )
-            }}
           />
         </div>
       )}