refactor(PostCard, PostCardGrid, HomeScreen): enhance PostCard component and remove PostCardGrid
All checks were successful
Frontend CI / build-and-push-web (push) Successful in 2m44s
Frontend CI / ota-android (push) Successful in 11m56s
Frontend CI / build-android-apk (push) Successful in 49m3s

- Introduced a new PostCardRelativeTime component for dynamic time display, improving user experience with real-time updates.
- Refactored PostCard to utilize memoization for performance optimization and prevent unnecessary re-renders.
- Removed the PostCardGrid component to streamline the codebase, consolidating functionality within the PostCard component.
- Updated HomeScreen to leverage the new PostCard features, ensuring consistent post rendering and interaction handling.
This commit is contained in:
lafay
2026-03-24 05:52:24 +08:00
parent f9f4e73747
commit b91e78c921
13 changed files with 623 additions and 547 deletions

View File

@@ -202,6 +202,10 @@ export const HomeScreen: React.FC = () => {
});
}, [posts, postsMap]);
/** 按 id 取当前列表中的最新 post配合 PostCard memo 忽略 onAction 引用 */
const postByIdRef = useRef<Map<string, Post>>(new Map());
postByIdRef.current = new Map(displayPosts.map((p) => [p.id, p]));
// 根据屏幕尺寸确定网格列数
const gridColumns = useMemo(() => {
if (isWideScreen || width >= 1440) return 4;
@@ -406,6 +410,16 @@ export const HomeScreen: React.FC = () => {
}
};
const handlePostActionRef = useRef(handlePostAction);
handlePostActionRef.current = handlePostAction;
const stableOnPostAction = useCallback((postId: string, action: PostCardAction) => {
const post = postByIdRef.current.get(postId);
if (post) {
handlePostActionRef.current(post, action);
}
}, []);
// 跳转到发帖页面(使用 Modal 方式)
const handleCreatePost = () => {
setShowCreatePost(true);
@@ -430,12 +444,12 @@ export const HomeScreen: React.FC = () => {
]}>
<PostCard
post={item}
onAction={(action) => handlePostAction(item, action)}
onAction={(action) => stableOnPostAction(item.id, action)}
isPostAuthor={isPostAuthor}
/>
</View>
);
}, [currentUser?.id, handlePostAction, isMobile, listItemWidth, responsiveGap]);
}, [currentUser?.id, stableOnPostAction, isMobile, listItemWidth, responsiveGap]);
// 估算帖子在瀑布流中的高度(用于均匀分配)
const estimatePostHeight = (post: Post, columnWidth: number): number => {
@@ -514,7 +528,7 @@ export const HomeScreen: React.FC = () => {
<PostCard
post={post}
variant="grid"
onAction={(action) => handlePostAction(post, action)}
onAction={(action) => stableOnPostAction(post.id, action)}
isPostAuthor={isPostAuthor}
/>
</View>
@@ -575,7 +589,7 @@ export const HomeScreen: React.FC = () => {
key={post.id}
post={post}
variant={viewMode === 'grid' ? 'grid' : 'list'}
onAction={(action) => handlePostAction(post, action)}
onAction={(action) => stableOnPostAction(post.id, action)}
isPostAuthor={isPostAuthor}
/>
);