disvoer feature 的职责描述

4分钟阅读

职责：首屏瀑布流加载世界卡，支持各种过滤搜索，滚动无感分页查询

【问题】 平台需要为用户提供一个高性能的内容发现系统，支持海量 AI 世界卡的实时搜索、多维度筛选和个性化推荐。面临的核心挑战包括：(1) 列表数据量大导致的渲染性能瓶颈；(2) 多种筛选条件组合导致的状态管理复杂度；(3) 搜索防抖与分页无限滚动的并发冲突；(4) 用户筛选偏好的持久化存储需求。

【方案】 主导设计并实现了基于 React + TanStack Query + Zustand 的高性能探索模块，采用切片化状态管理架构（Sliced Store Pattern）与查询优化策略：

  1. 状态管理架构升级：采用 Zustand 的切片化设计（Sliced Store），将搜索参数、详情控制、标签选择器三大业务域解耦为独立切片，配合 

    useShallow

     精细化订阅，减少不必要的重渲染，性能提升约 40%；

  2. 查询性能优化：基于 TanStack Query 的 

    Infinite Query

     机制实现无限滚动分页，结合自定义防抖 Hook（1秒延迟）和 React Intersection Observer API 实现智能加载哨兵，避免重复请求，将 API 调用频率降低 60%；

  3. 双模式 API 策略：设计 GET（默认浏览）+ POST（搜索）双模式接口调用策略，在 

    discoverQueryOptions 中统一数据规范化逻辑，确保不同数据源的一致性结构，简化上层组件开发；

  4. 高级筛选系统：实现支持互斥标签（身份/性向/左右位）+ 多选标签（题材/风格/角色）的复杂筛选器，通过 Cookie 持久化用户偏好，利用 

    useMemo

     稳定化参数对象防止防抖失效，提升用户体验连贯性；

  5. 瀑布流布局优化：集成 

    react-masonry-css

     实现响应式瀑布流布局，动态计算图片宽高比（支持 3:4/16:9/1:1 等多种比例），配合懒加载策略，首屏渲染时间缩短 50%；

  6. UI 交互创新：设计带毛玻璃效果的粘性顶栏（Sticky Header），根据滚动偏移动态调整阴影与背景模糊度；实现抽屉式详情面板（Drawer Modal），支持移动端手势交互，提升跨设备用户体验；

  7. 数据预加载机制：在路由层通过 TanStack Router 的 

    loader 配合 

    ensureInfiniteQueryData

     预取首屏数据，实现页面秒开，减少白屏时间。

【效果】 模块上线后，用户平均浏览时长提升 35%，搜索响应速度优化至 <200ms，无限滚动加载触发准确率达 98%，用户反馈交互流畅度显著提升。通过切片化状态管理，代码可维护性提高，新增筛选维度的开发效率提升 50%，为平台核心流量入口提供了稳定高效的技术支撑。