Austin/clash-verge-rev
1
0
Fork 0
mirror of https://github.com/clash-verge-rev/clash-verge-rev.git synced 2024-11-16 11:42:21 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: memoize the proxy col items (#1029)

Browse Source
This commit is contained in:
oomeow 2024-05-18 15:14:22 +08:00 committed by GitHub
parent db5d14e0ce
commit 43f0b935cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/proxy/proxy-groups.tsx
View File

@ -122,7 +122,7 @@ export const ProxyGroups = (props: Props) => {
return (
<Virtuoso
ref={virtuosoRef}
style={{ height: "calc(100% - 12px)" }}
style={{ height: "calc(100% - 16px)" }}
totalCount={renderList.length}
increaseViewportBy={256}
itemContent={(index) => (

25
src/components/proxy/proxy-render.tsx
View File

@ -19,7 +19,7 @@ import type { IRenderItem } from "./use-render-list";
import { useVerge } from "@/hooks/use-verge";
import { useRecoilState } from "recoil";
import { atomThemeMode } from "@/services/states";
import { useEffect, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { convertFileSrc } from "@tauri-apps/api/tauri";
import { downloadIconCache } from "@/services/cmds";
@ -171,6 +171,18 @@ export const ProxyRender = (props: RenderProps) => {
}
if (type === 4 && !group.hidden) {
const proxyColItemsMemo = useMemo(() => {
return proxyCol?.map((proxy) => (
<ProxyItemMini
key={item.key + proxy.name}
group={group}
proxy={proxy!}
selected={group.now === proxy.name}
showType={headState?.showType}
onClick={() => onChangeProxy(group, proxy!)}
/>
));
}, [proxyCol, group, headState]);
return (
<Box
sx={{
@ -183,16 +195,7 @@ export const ProxyRender = (props: RenderProps) => {
gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
}}
>
{proxyCol?.map((proxy) => (
<ProxyItemMini
key={item.key + proxy.name}
group={group}
proxy={proxy!}
selected={group.now === proxy.name}
showType={headState?.showType}
onClick={() => onChangeProxy(group, proxy!)}
/>
))}
{proxyColItemsMemo}
</Box>
);
}