一、React Query 10题

1、React Query解决什么问题？ 专门管理服务端状态，解决原生useEffect请求：重复请求、无缓存、需手动维护loading/error、窗口重连重载、内存泄漏、状态同步繁琐问题。

2、服务端状态 vs 客户端状态 服务端：接口后端数据（列表、详情），用ReactQuery； 客户端：UI全局状态（弹窗、主题、token），用Zustand。

3、isLoading / isFetching 区别 isLoading：首次无缓存请求加载； isFetching：任意时刻刷新、后台更新，只要请求中即为true。

4、queryKey作用 请求唯一缓存标识；key改变自动重发请求；用来失效、修改缓存、请求去重。

5、staleTime 和 cacheTime 核心区别（必考） staleTime：数据新鲜时长，过期才会重请求； cacheTime：内存缓存留存时长，组件卸载后清理缓存。

6、useQuery、useMutation使用场景 useQuery：GET查询、只读、自带缓存； useMutation：POST/PUT/DELETE增删改，无自动缓存，手动同步数据。

7、mutation更新页面列表两种方案 ①invalidateQueries：失效缓存，自动重请求（简单）； ②setQueryData：直接修改本地缓存，无需发请求（高性能）。

8、useInfiniteQuery作用 专门做无限滚动，自动拼接分页数据，管控下一页加载、是否还有余量。

9、默认自动发起请求场景 组件挂载、窗口聚焦、网络恢复、queryKey变更、定时轮询。

10、怎么防止请求竞态、内存泄漏 内置自动取消：组件卸载、key切换，自动终止旧请求，规避竞态、内存泄漏。

---

二、Zustand 10题

11、Zustand对比Redux优势 无需Provider包裹、极简代码、无reducer模板、精准订阅减少重渲染、原生支持异步、中间件齐全、体积极小、TS友好。

12、create中set/get作用 set：更新全局状态，支持函数式更新； get：随时获取仓库最新state，组件外部也可调用。

13、Zustand如何避免无效重渲染 精准订阅：组件只订阅自身用到的字段，其他字段变更，组件不重渲染。

14、persist持久化中间件作用 自动把仓库数据存入localStorage，页面刷新、关闭重启，状态不丢失，多用于存储token、用户信息。

15、immer中间件作用 简化不可变数据，支持直接修改引用类型（数组/对象），内部自动生成新state。

16、为什么拆分多个Store仓库 业务解耦、状态隔离，修改用户仓库，不会触发商品相关组件重渲染，优化性能。

17、组件外部怎么取用Zustand状态 使用getState()，路由守卫、axios拦截器可直接读取token、修改登录态。

18、Zustand异步写法 原生支持async/await，不需要thunk中间件，仓库内直接编写异步请求修改状态。

19、选择器selector优化点 抽取公共计算逻辑，缓存计算结果，避免组件每次渲染重复计算，提升性能。

20、项目中二者分工（面试必考）

✅Zustand：管理客户端UI全局状态：token、用户信息、主题、弹窗、权限；

✅ReactQuery：管理所有服务端接口状态：列表、分页、详情、接口缓存； 二者分离，不再把接口数据存入全局状态，减少状态不同步、冗余代码。

---

三、简历专属实战话术

项目采用Zustand+ReactQuery状态分层架构管理全局状态：使用Zustand拆分模块化仓库，配合persist、immer中间件管理用户Token、权限、全局UI状态，依托精准订阅特性降低组件无效重渲染；使用ReactQuery统一管理服务端接口，利用请求缓存、请求去重、窗口聚焦刷新、自动取消请求能力，优化接口重复请求、网络竞态问题；新增编辑业务通过invalidateQueries失效缓存实现页面无感更新，舍弃Redux冗余写法，大幅缩减状态管理代码量，提升项目页面加载与交互性能。

四、高频易错速记小点

1. ReactQuery：接口数据绝不放Zustand，分层解耦

2. Zustand：不用Provider、不用写action/reducer

3. 更新列表：优先失效缓存，复杂业务直接改缓存

4. Zustand外部取值：只用getState()