用途:该技能面向 React 状态管理,提供 ahooks v3+ 工具 Hooks 的使用规范,主要解决两类问题——一起变化的分组状态,以及需要跨浏览器会话持久化的状态。不覆盖数据请求、URL 状态管理、复杂状态机和异步操作。
前提假设:ahooks v3+、React 18+(支持 Hooks)、TypeScript v5+(用于类型推断),且仅限客户端(localStorage 需要浏览器 API)。
主要能力与用法:useSetState 用于一起更新的分组状态,支持浅合并的部分更新,示例为 import { useSetState } from 'ahooks' 后 setState({ name: 'John' });适用于表单状态、游戏引擎状态、临时 UI 状态。useLocalStorageState 用于跨会话持久化,示例为 useLocalStorageState<boolean>('key', { defaultValue: false }),可用泛型保证类型安全,适用于用户偏好、调试开关、设置项。
选择原则:可共享到 URL 的状态优先用 nuqs;异步操作与加载状态优先用 TanStack Query;仅简单独立状态才用 useState(较少见)。避免将本技能用于 URL 状态、加载/错误状态、复杂异步操作,也不要在未写显式同步逻辑时混用 URL 状态与 localStorage。
与 nuqs 集成时可做 URL 与 localStorage 的双向同步,注意首次挂载标记与同步逻辑,适合既需 URL 共享又需持久化的调试开关与功能开关。
限制:敏感数据不应放入 localStorage,应使用安全存储;文档未提供收费、价格与更多平台信息。