修复性能问题

src/manage/qd/BookIndex.tsx

@@ -3,7 +3,7 @@ import { useBookInfo } from "./BookInfoProvider";
 import styles from './BookIndex.module.css';
 import { loadChapterListsIfNeeded, useBookContext, useBookStatus } from "./BookStatusProvider";
 import VolumesList from "./VolumesList";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useDb } from "../dbProvider";
 import type { Volume } from "../../qdtypes";
 import { ChapterShowMode, get_new_volumes } from "../../utils/qd";
@@ -53,13 +53,17 @@ export default function BookIndex() {
     useEffect(() => {
         handle();
     }, [bookInfo.id]);
-    setItems([]);
+    useEffect(() => {
-    let vols: Volume[] = bookInfo.volumes;
+        setItems([]);
-    if (bookStatus.chapterLists) {
+    }, [setItems]);
-        vols = get_new_volumes(bookStatus.chapterLists, bookInfo.volumes, bookStatus.chapterShowMode);
+    const vols = useMemo<Volume[]>(() => {
-    } else if (bookStatus.chapterShowMode != ChapterShowMode.All) {
+        if (bookStatus.chapterLists) {
-        vols = [];
+            return get_new_volumes(bookStatus.chapterLists, bookInfo.volumes, bookStatus.chapterShowMode);
-    }
+        } else if (bookStatus.chapterShowMode != ChapterShowMode.All) {
+            return [];
+        }
+        return bookInfo.volumes;
+    }, [bookStatus.chapterLists, bookInfo.volumes, bookStatus.chapterShowMode]);
     return (
         <div className={styles.c}>
             <Flex justify="center" align="center">

src/manage/qd/VolumesList.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router";
 import { CheckCircleOutlined } from "@ant-design/icons";
 import OpenInNewTab from "../../../node_modules/@material-icons/svg/svg/open_in_new/twotone.svg";
 import Icon from "../../components/Icon";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import LocationSearchingTwotone from "../../../node_modules/@material-icons/svg/svg/location_searching/twotone.svg";
 import { generateId } from "../../utils";
 
@@ -34,7 +34,7 @@ async function open_in_qidian(bookId: number, chapterId: number) {
     }
 }
 
-export default function VolumesList({ volumes, bookId, oneLine, current, loc, locTip, setLoc }: VolumesListProps) {
+export default memo(function VolumesList({ volumes, bookId, oneLine, current, loc, locTip, setLoc }: VolumesListProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const currentVolumeId = useMemo(() => {
         if (!current) return null;
@@ -137,4 +137,4 @@ export default function VolumesList({ volumes, bookId, oneLine, current, loc, lo
         /></div>
         {current && <Tooltip title="定位到当前章节" placement="left"><Icon cls={styles.current}><LocationSearchingTwotone fill="currentColor" onClick={scrollToCurrent} /></Icon></Tooltip>}
     </div>);
-}
+})