feat: performance improve

CHANGELOG.md

@@ -13,6 +13,11 @@
 - 基于 B 站视频 bgm 识别结果精准搜索歌词
 - 切换到 expo-router
 
+### Fixed
+
+- 一些减少 rerender 次数的优化
+- 使用 [react-native-paper/4807](https://github.com/callstack/react-native-paper/issues/4807) 中提到的 Menu 组件修复方法，移除 patch
+
 ## [1.3.6] - 2025-10-26
 
 ### Added

docs/principles.md

@@ -0,0 +1,5 @@
+## 开发规范（及一些 tips）
+
+### UI 开发
+
+- FlashList 使用到的所有 renderItem 应该在函数外定义，并把所有除了 item 之外的依赖放入 extraData 中，并使用 useMemo 包裹 extraData

pnpm-workspace.yaml

@@ -3,6 +3,3 @@ onlyBuiltDependencies:
   - esbuild
   - lefthook
   - unrs-resolver
-
-patchedDependencies:
-  react-native-paper: patches/react-native-paper.patch

src/app/(tabs)/index.tsx

@@ -4,7 +4,7 @@ import SearchSuggestions from '@/features/home/SearchSuggestions'
 import { usePersonalInformation } from '@/hooks/queries/bilibili/user'
 import useAppStore from '@/hooks/stores/useAppStore'
 import { queryClient } from '@/lib/config/queryClient'
-import { toastAndLogError } from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
 import {
 	matchSearchStrategies,
 	navigateWithSearchStrategy,

src/app/(tabs)/settings.tsx

@@ -1,9 +1,9 @@
 import NowPlayingBar from '@/components/NowPlayingBar'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
 import useAppStore from '@/hooks/stores/useAppStore'
 import { useModalStore } from '@/hooks/stores/useModalStore'
+import { usePlayerStore } from '@/hooks/stores/usePlayerStore'
 import { checkForAppUpdate } from '@/lib/services/updateService'
-import { toastAndLogError } from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
 import toast from '@/utils/toast'
 import * as Application from 'expo-application'
 import * as Clipboard from 'expo-clipboard'
@@ -24,7 +24,7 @@ const updateTime = Updates.createdAt
 
 export default function SettingsPage() {
 	const insets = useSafeAreaInsets()
-	const currentTrack = useCurrentTrack()
+	const haveTrack = usePlayerStore((state) => !!state.currentTrackUniqueKey)
 	const colors = useTheme().colors
 
 	return (
@@ -38,7 +38,7 @@ export default function SettingsPage() {
 				style={{
 					flex: 1,
 					paddingTop: insets.top + 8,
-					paddingBottom: currentTrack ? 70 : insets.bottom,
+					paddingBottom: haveTrack ? 70 : insets.bottom,
 				}}
 			>
 				<View

src/app/_layout.tsx

@@ -8,11 +8,8 @@ import drizzleDb, { expoDb } from '@/lib/db/db'
 import { initPlayer } from '@/lib/player/playerLogic'
 import lyricService from '@/lib/services/lyricService'
 import { ProjectScope } from '@/types/core/scope'
-import log, {
-	cleanOldLogFiles,
-	reportErrorToSentry,
-	toastAndLogError,
-} from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
+import log, { cleanOldLogFiles, reportErrorToSentry } from '@/utils/log'
 import { storage } from '@/utils/mmkv'
 import toast from '@/utils/toast'
 import { useLogger } from '@react-navigation/devtools'

src/app/download.tsx

@@ -1,8 +1,8 @@
 import NowPlayingBar from '@/components/NowPlayingBar'
 import DownloadHeader from '@/features/downloads/DownloadHeader'
 import DownloadTaskItem from '@/features/downloads/DownloadTaskItem'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
 import useDownloadManagerStore from '@/hooks/stores/useDownloadManagerStore'
+import { usePlayerStore } from '@/hooks/stores/usePlayerStore'
 import type { DownloadTask } from '@/types/core/downloadManagerStore'
 import { FlashList } from '@shopify/flash-list'
 import { useRouter } from 'expo-router'
@@ -12,6 +12,10 @@ import { Appbar, useTheme } from 'react-native-paper'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useShallow } from 'zustand/shallow'
 
+const renderItem = ({ item }: { item: DownloadTask }) => {
+	return <DownloadTaskItem task={item} />
+}
+
 export default function DownloadPage() {
 	const { colors } = useTheme()
 	const router = useRouter()
@@ -23,11 +27,7 @@ export default function DownloadPage() {
 	const start = useDownloadManagerStore((state) => state.startDownload)
 	const clearAll = useDownloadManagerStore((state) => state.clearAll)
 
-	const currentTrack = useCurrentTrack()
-
-	const renderItem = useCallback(({ item }: { item: DownloadTask }) => {
-		return <DownloadTaskItem task={item} />
-	}, [])
+	const haveTrack = usePlayerStore((state) => !!state.currentTrackUniqueKey)
 
 	const keyExtractor = useCallback((item: DownloadTask) => item.uniqueKey, [])
 
@@ -50,7 +50,7 @@ export default function DownloadPage() {
 					renderItem={renderItem}
 					keyExtractor={keyExtractor}
 					contentContainerStyle={{
-						paddingBottom: currentTrack ? 70 + insets.bottom : insets.bottom,
+						paddingBottom: haveTrack ? 70 + insets.bottom : insets.bottom,
 					}}
 				/>
 			</View>

src/app/leaderboard.tsx

@@ -4,7 +4,7 @@ import {
 	usePlayCountLeaderBoardPaginated,
 	useTotalPlaybackDuration,
 } from '@/hooks/queries/db/track'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
+import { usePlayerStore } from '@/hooks/stores/usePlayerStore'
 import type { Track } from '@/types/core/media'
 import { FlashList } from '@shopify/flash-list'
 import { useRouter } from 'expo-router'
@@ -40,11 +40,24 @@ const formatDurationToWords = (seconds: number) => {
 	return parts.join(' ')
 }
 
+const renderItem = ({
+	item,
+	index,
+}: {
+	item: LeaderBoardItemData
+	index: number
+}) => (
+	<LeaderBoardListItem
+		item={item}
+		index={index}
+	/>
+)
+
 export default function LeaderBoardPage() {
 	const { colors } = useTheme()
 	const router = useRouter()
 	const insets = useSafeAreaInsets()
-	const currentTrack = useCurrentTrack()
+	const haveTrack = usePlayerStore((state) => !!state.currentTrackUniqueKey)
 
 	const {
 		data: leaderBoardData,
@@ -66,16 +79,6 @@ export default function LeaderBoardPage() {
 		return formatDurationToWords(totalDurationData)
 	}, [totalDurationData, isTotalDurationError])
 
-	const renderItem = useCallback(
-		({ item, index }: { item: LeaderBoardItemData; index: number }) => (
-			<LeaderBoardListItem
-				item={item}
-				index={index}
-			/>
-		),
-		[],
-	)
-
 	const keyExtractor = useCallback(
 		(item: LeaderBoardItemData) => item.track.uniqueKey,
 		[],
@@ -123,7 +126,7 @@ export default function LeaderBoardPage() {
 				renderItem={renderItem}
 				keyExtractor={keyExtractor}
 				contentContainerStyle={{
-					paddingBottom: currentTrack ? 70 + insets.bottom : insets.bottom,
+					paddingBottom: haveTrack ? 70 + insets.bottom : insets.bottom,
 				}}
 				onEndReached={onEndReached}
 				onEndReachedThreshold={0.8}

src/app/player.tsx

@@ -5,7 +5,7 @@ import { PlayerHeader } from '@/features/player/components/PlayerHeader'
 import Lyrics from '@/features/player/components/PlayerLyrics'
 import { PlayerSlider } from '@/features/player/components/PlayerSlider'
 import { TrackInfo } from '@/features/player/components/PlayerTrackInfo'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
+import useCurrentTrack from '@/hooks/player/useCurrentTrack'
 import * as Haptics from '@/utils/haptics'
 import type { BottomSheetMethods } from '@gorhom/bottom-sheet/lib/typescript/types'
 import { useImage } from 'expo-image'

src/app/playlist/local/[id].tsx

@@ -23,8 +23,8 @@ import { useModalStore } from '@/hooks/stores/useModalStore'
 import { useDebouncedValue } from '@/hooks/utils/useDebouncedValue'
 import type { CreateArtistPayload } from '@/types/services/artist'
 import type { CreateTrackPayload } from '@/types/services/track'
+import { toastAndLogError } from '@/utils/error-handling'
 import * as Haptics from '@/utils/haptics'
-import { toastAndLogError } from '@/utils/log'
 import toast from '@/utils/toast'
 import { useLocalSearchParams, useRouter } from 'expo-router'
 import { useCallback, useEffect, useState } from 'react'

src/app/test.tsx

@@ -1,11 +1,11 @@
 import { alert } from '@/components/modals/AlertModal'
 import NowPlayingBar from '@/components/NowPlayingBar'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
 import useDownloadManagerStore from '@/hooks/stores/useDownloadManagerStore'
 import { usePlayerStore } from '@/hooks/stores/usePlayerStore'
 import { downloadService } from '@/lib/services/downloadService'
 import lyricService from '@/lib/services/lyricService'
-import log, { toastAndLogError } from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
+import log from '@/utils/log'
 import toast from '@/utils/toast'
 import * as Updates from 'expo-updates'
 import { useState } from 'react'
@@ -21,7 +21,7 @@ export default function TestPage() {
 	const { isUpdatePending } = Updates.useUpdates()
 	const insets = useSafeAreaInsets()
 	const { colors } = useTheme()
-	const currentTrack = useCurrentTrack()
+	const haveTrack = usePlayerStore((state) => !!state.currentTrackUniqueKey)
 
 	const testCheckUpdate = async () => {
 		try {
@@ -149,7 +149,7 @@ export default function TestPage() {
 		>
 			<ScrollView
 				style={{ flex: 1, padding: 16, paddingTop: insets.top + 30 }}
-				contentContainerStyle={{ paddingBottom: currentTrack ? 80 : 20 }}
+				contentContainerStyle={{ paddingBottom: haveTrack ? 80 : 20 }}
 				contentInsetAdjustmentBehavior='automatic'
 			>
 				<View style={{ marginBottom: 16 }}>

src/components/NowPlayingBar.tsx

@@ -1,5 +1,5 @@
 import useAnimatedTrackProgress from '@/hooks/player/useAnimatedTrackProgress'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
+import useCurrentTrack from '@/hooks/player/useCurrentTrack'
 import { usePlayerStore } from '@/hooks/stores/usePlayerStore'
 import * as Haptics from '@/utils/haptics'
 import { Image } from 'expo-image'

src/components/common/FunctionalMenu.tsx

@@ -32,6 +32,7 @@ const FunctionalMenu = memo(function FunctionalMenu({
 				{...props}
 				onDismiss={onClose}
 				visible={visible}
+				key={String(visible)}
 				style={{
 					opacity: showContent ? 1 : 0,
 				}}

src/components/modals/PlayerQueueModal.tsx

@@ -1,6 +1,6 @@
+import useCurrentQueue from '@/hooks/player/useCurrentQueue'
+import useCurrentTrack from '@/hooks/player/useCurrentTrack'
 import usePreventRemove from '@/hooks/router/usePreventRemove'
-import useCurrentQueue from '@/hooks/stores/playerHooks/useCurrentQueue'
-import useCurrentTrack from '@/hooks/stores/playerHooks/useCurrentTrack'
 import { usePlayerStore } from '@/hooks/stores/usePlayerStore'
 import type { Track } from '@/types/core/media'
 import type { BottomSheetFlatListMethods } from '@gorhom/bottom-sheet'

src/components/modals/edit-metadata/editPlaylistMetadataModal.tsx

@@ -2,7 +2,8 @@ import { useEditPlaylistMetadata } from '@/hooks/mutations/db/playlist'
 import { useModalStore } from '@/hooks/stores/useModalStore'
 import { bilibiliFacade } from '@/lib/facades/bilibili'
 import type { Playlist } from '@/types/core/media'
-import log, { toastAndLogError } from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
+import log from '@/utils/log'
 import toast from '@/utils/toast'
 import * as DocumentPicker from 'expo-document-picker'
 import * as FileSystem from 'expo-file-system'

src/components/modals/login/CookieLoginModal.tsx

@@ -2,7 +2,7 @@ import { favoriteListQueryKeys } from '@/hooks/queries/bilibili/favorite'
 import { userQueryKeys } from '@/hooks/queries/bilibili/user'
 import useAppStore, { serializeCookieObject } from '@/hooks/stores/useAppStore'
 import { useModalStore } from '@/hooks/stores/useModalStore'
-import { toastAndLogError } from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
 import toast from '@/utils/toast'
 import { useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo, useState } from 'react'

src/components/modals/lyrics/EditLyrics.tsx

@@ -3,7 +3,7 @@ import { useModalStore } from '@/hooks/stores/useModalStore'
 import { queryClient } from '@/lib/config/queryClient'
 import lyricService from '@/lib/services/lyricService'
 import type { ParsedLrc } from '@/types/player/lyrics'
-import { toastAndLogError } from '@/utils/log'
+import { toastAndLogError } from '@/utils/error-handling'
 import { mergeLrc, parseLrc } from '@/utils/lyrics'
 import toast from '@/utils/toast'
 import { useState } from 'react'