refactor(core): optimize state management and component rendering performance
Improve application stability and performance by optimizing Zustand store usage, implementing memoization patterns, and introducing persistent authentication. - **State Management**: - Refactor Zustand selectors to use `useShallow` and `getState()` to prevent unnecessary re-renders and infinite loops in hooks. - Implement `persist` middleware for `authStore` to maintain user sessions across restarts. - Introduce `buildStateCached` in `themeStore` to reduce redundant theme object computations. - **Performance & Rendering**: - Implement `useMemo` for stable object/array references in `ImageGallery` and list components to prevent expensive re-renders. - Replace inline arrow functions with `useCallback` in complex screens like `ChatScreen` and `MessageListScreen`. - Optimize `FlashList` usage by providing stable `key` and `extraData` props. - **Architecture**: - Decouple unread count fetching by introducing `useUnreadCountQuery` (React Query) for better caching and synchronization. - Add `useChannels` hook to centralize channel data fetching. - Refine `SessionGate` logic to allow immediate rendering of authenticated users while verifying in the background.
This commit is contained in:
@@ -1084,6 +1084,12 @@ export const PostDetailScreen: React.FC = () => {
|
||||
}));
|
||||
}, [post?.images]);
|
||||
|
||||
// 为 ImageGallery 提供稳定的图片列表,避免 Math.random() 在每次渲染时生成新 ID
|
||||
const stableGalleryImages = useMemo(() => allImages.map((img, i) => ({
|
||||
id: img.id || img.url || `img-${i}`,
|
||||
url: img.url || img.uri || ''
|
||||
})), [allImages]);
|
||||
|
||||
// 渲染帖子头部 - 小红书/微博风格
|
||||
const renderPostHeader = useCallback(() => {
|
||||
if (!post) return null;
|
||||
@@ -1740,10 +1746,7 @@ export const PostDetailScreen: React.FC = () => {
|
||||
{/* 图片预览 ImageGallery */}
|
||||
<ImageGallery
|
||||
visible={showImageModal}
|
||||
images={allImages.map(img => ({
|
||||
id: img.id || img.url || String(Math.random()),
|
||||
url: img.url || img.uri || ''
|
||||
}))}
|
||||
images={stableGalleryImages}
|
||||
initialIndex={selectedImageIndex}
|
||||
onClose={() => setShowImageModal(false)}
|
||||
enableSave
|
||||
@@ -1815,10 +1818,7 @@ export const PostDetailScreen: React.FC = () => {
|
||||
{/* 图片预览 ImageGallery */}
|
||||
<ImageGallery
|
||||
visible={showImageModal}
|
||||
images={allImages.map(img => ({
|
||||
id: img.id || img.url || String(Math.random()),
|
||||
url: img.url || img.uri || ''
|
||||
}))}
|
||||
images={stableGalleryImages}
|
||||
initialIndex={selectedImageIndex}
|
||||
onClose={() => setShowImageModal(false)}
|
||||
enableSave
|
||||
|
||||
Reference in New Issue
Block a user