当前位置： 首页 > backend >正文

React强大且灵活hooks库——ahooks入门实践之状态管理类hook（state）详解

backend 2025/7/14 11:14:15

什么是 ahooks？

ahooks 是一个 React Hooks 库，提供了大量实用的自定义 hooks，帮助开发者更高效地构建 React 应用。其中状态管理类 hooks 是 ahooks 的一个重要分类，专门用于简化 React 状态的管理和操作。

安装 ahooks

npm install ahooks

状态管理类 hooks 详解

useSetState – 对象状态管理

useSetState 用于管理对象类型的状态，提供类似 setState 的 API。

import React from "react";
import { useSetState } from "ahooks";
import { Button, Card, Input } from "antd";const UseSetStateExample = () => {const [state, setState] = useSetState({name: "张三",age: 25,email: "zhangsan@example.com",});const handleUpdateName = () => {setState({ name: "李四" });};const handleUpdateAge = () => {setState((prev) => ({ age: prev.age + 1 }));};const handleReset = () => {setState({name: "张三",age: 25,email: "zhangsan@example.com",});};return (<Card title="useSetState 对象状态管理"><div style={{ marginBottom: 16 }}><p><strong>姓名:</strong> {state.name}</p><p><strong>年龄:</strong> {state.age}</p><p><strong>邮箱:</strong> {state.email}</p></div><div><Button onClick={handleUpdateName} style={{ marginRight: 8 }}>更新姓名</Button><Button onClick={handleUpdateAge} style={{ marginRight: 8 }}>增加年龄</Button><Button onClick={handleReset}>重置</Button></div></Card>);
};

useBoolean – 布尔值状态管理

useBoolean 用于管理布尔值状态，提供便捷的切换方法。

import React from "react";
import { useBoolean } from "ahooks";
import { Button, Card, Switch } from "antd";const UseBooleanExample = () => {const [state, { toggle, setTrue, setFalse }] = useBoolean(false);return (<Card title="useBoolean 布尔值状态管理"><div style={{ marginBottom: 16 }}><p><strong>当前状态:</strong> {state ? "开启" : "关闭"}</p><Switch checked={state} onChange={toggle} /></div><div><Button onClick={toggle} style={{ marginRight: 8 }}>切换</Button><Button onClick={setTrue} style={{ marginRight: 8 }}>设为开启</Button><Button onClick={setFalse}>设为关闭</Button></div></Card>);
};

useToggle – 切换状态管理

useToggle 用于在两个值之间切换状态。

import React from "react";
import { useToggle } from "ahooks";
import { Button, Card, Tag } from "antd";const UseToggleExample = () => {const [state, { toggle, setLeft, setRight }] = useToggle("light", "dark");return (<Card title="useToggle 切换状态管理"><div style={{ marginBottom: 16 }}><p><strong>当前主题:</strong> <Tag color="blue">{state}</Tag></p></div><div><Button onClick={toggle} style={{ marginRight: 8 }}>切换主题</Button><Button onClick={setLeft} style={{ marginRight: 8 }}>浅色主题</Button><Button onClick={setRight}>深色主题</Button></div></Card>);
};

useUrlState – URL 状态管理

useUrlState 用于将状态同步到 URL 参数中。

import React, { useState, useCallback } from "react";
import { Button, Card } from "antd";// 自定义 useUrlState hook
const useUrlState = (initialState = {}) => {const [state, setState] = useState(() => {const urlParams = new URLSearchParams(window.location.search);const result = {};Object.keys(initialState).forEach((key) => {result[key] = urlParams.get(key) || initialState[key];});return result;});const updateState = useCallback((newState) => {const urlParams = new URLSearchParams(window.location.search);if (typeof newState === "function") {newState = newState(state);}Object.entries(newState).forEach(([key, value]) => {if (value === undefined || value === null) {urlParams.delete(key);} else {urlParams.set(key, String(value));}});const newUrl = `${window.location.pathname}?${urlParams.toString()}`;window.history.pushState({}, "", newUrl);setState((prev) => ({ ...prev, ...newState }));},

[state]

); return [state, updateState]; }; const UseUrlStateExample = () => { const [state, setState] = useUrlState({ page: “1” }); return ( <div> <Card title=”useUrlState URL 状态管理”> <p> <strong>当前页码:</strong> {state.page} <span style={{ paddingLeft: 8 }}> <Button size=”small” onClick={() => { setState((s) => ({ page: Number(s.page) + 1 })); }} style={{ marginRight: 4 }} > + </Button> <Button size=”small” onClick={() => { setState((s) => ({ page: Number(s.page) – 1 })); }} style={{ marginRight: 4 }} > – </Button> <Button size=”small” onClick={() => { setState({ page: undefined }); }} > reset </Button> </span> </p> <p style={{ marginTop: 8, fontSize: “12px”, color: “#666” }}> URL: {window.location.href} </p> </Card> </div> ); };

useCookieState – Cookie 状态管理

useCookieState 用于将状态同步到 Cookie 中。

import React from "react";
import { useCookieState } from "ahooks";
import { Input, Button, Card } from "antd";const UseCookieStateExample = () => {const [username, setUsername] = useCookieState("username", "");const [theme, setTheme] = useCookieState("theme", "light");return (<Card title="useCookieState Cookie 状态管理"><div style={{ marginBottom: 16 }}><Inputplaceholder="用户名"value={username}onChange={(e) => setUsername(e.target.value)}style={{ marginBottom: 8 }}/><p><strong>当前主题:</strong> {theme}</p></div><div><Button onClick={() => setTheme("light")} style={{ marginRight: 8 }}>浅色主题</Button><Button onClick={() => setTheme("dark")} style={{ marginRight: 8 }}>深色主题</Button><Button onClick={() => setUsername("")}>清空用户名</Button></div></Card>);
};

useLocalStorageState – 本地存储状态管理

useLocalStorageState 用于将状态同步到 localStorage 中。

import React from "react";
import { useLocalStorageState } from "ahooks";
import { Input, Button, Card } from "antd";const UseLocalStorageStateExample = () => {const [notes, setNotes] = useLocalStorageState("notes", "");return (<Card title="useLocalStorageState 本地存储状态管理"><div style={{ marginBottom: 16 }}><Input.TextAreaplaceholder="输入笔记"value={notes}onChange={(e) => setNotes(e.target.value)}rows={3}style={{ marginBottom: 8 }}/><p><strong>字符计数:</strong> {notes.length}</p></div><div><Button onClick={() => setNotes("")}>清空笔记</Button></div></Card>);
};

useSessionStorageState – 会话存储状态管理

useSessionStorageState 用于将状态同步到 sessionStorage 中。

import React from "react";
import { useSessionStorageState } from "ahooks";
import { Input, Button, Card } from "antd";const UseSessionStorageStateExample = () => {const [isLoggedIn, setIsLoggedIn] = useSessionStorageState("isLoggedIn",false);return (<Card title="useSessionStorageState 会话存储状态管理"><div style={{ marginBottom: 16 }}><p><strong>登录状态:</strong> {isLoggedIn ? "已登录" : "未登录"}</p></div><div><Button onClick={() => setIsLoggedIn(true)} style={{ marginRight: 8 }}>登录</Button><Button onClick={() => setIsLoggedIn(false)} style={{ marginRight: 8 }}>登出</Button></div></Card>);
};

useDebounce – 防抖状态

useDebounce 用于创建防抖状态，延迟更新值。

import React, { useState } from "react";
import { useDebounce } from "ahooks";
import { Input, Card } from "antd";const UseDebounceExample = () => {const [value, setValue] = useState("");const debouncedValue = useDebounce(value, 500);return (<Card title="useDebounce 防抖状态"><div style={{ marginBottom: 16 }}><Inputplaceholder="输入内容（500ms 防抖）"value={value}onChange={(e) => setValue(e.target.value)}style={{ marginBottom: 8 }}/><p><strong>实时值:</strong> {value}</p><p><strong>防抖值:</strong> {debouncedValue}</p></div></Card>);
};

useThrottle – 节流状态

useThrottle 用于创建节流状态，限制更新频率。

import React, { useState } from "react";
import { useThrottle } from "ahooks";
import { Input, Card } from "antd";const UseThrottleExample = () => {const [value, setValue] = useState("");const throttledValue = useThrottle(value, 1000);return (<Card title="useThrottle 节流状态"><div style={{ marginBottom: 16 }}><Inputplaceholder="输入内容（1000ms 节流）"value={value}onChange={(e) => setValue(e.target.value)}style={{ marginBottom: 8 }}/><p><strong>实时值:</strong> {value}</p><p><strong>节流值:</strong> {throttledValue}</p></div></Card>);
};

useMap – Map 状态管理

useMap 用于管理 Map 类型的状态。

import React from "react";
import { useMap } from "ahooks";
import { Button, Card, Input } from "antd";const UseMapExample = () => {const [map, { set, remove, reset }] = useMap(new Map([["name", "张三"],["age", "25"],]));const [key, setKey] = React.useState("");const [value, setValue] = React.useState("");return (<Card title="useMap Map 状态管理"><div style={{ marginBottom: 16 }}><Inputplaceholder="键"value={key}onChange={(e) => setKey(e.target.value)}style={{ marginBottom: 8 }}/><Inputplaceholder="值"value={value}onChange={(e) => setValue(e.target.value)}style={{ marginBottom: 8 }}/><p><strong>Map 内容:</strong></p><ul>{Array.from(map.entries()).map(([k, v]) => (<li key={k}>{k}: {v}</li>))}</ul></div><div><Button onClick={() => set(key, value)} style={{ marginRight: 8 }}>设置</Button><Button onClick={() => remove(key)} style={{ marginRight: 8 }}>删除</Button><Button onClick={reset}>重置</Button></div></Card>);
};

useSet – Set 状态管理

useSet 用于管理 Set 类型的状态。

import React from "react";
import { useSet } from "ahooks";
import { Button, Card, Input } from "antd";const UseSetExample = () => {const [set, { add, remove, reset }] = useSet(["apple", "banana"]);const [value, setValue] = React.useState("");return (<Card title="useSet Set 状态管理"><div style={{ marginBottom: 16 }}><Inputplaceholder="输入值"value={value}onChange={(e) => setValue(e.target.value)}style={{ marginBottom: 8 }}/><p><strong>Set 内容:</strong> {Array.from(set).join(", ")}</p><p><strong>包含 {value}:</strong> {set.has(value) ? "是" : "否"}</p></div><div><Button onClick={() => add(value)} style={{ marginRight: 8 }}>添加</Button><Button onClick={() => remove(value)} style={{ marginRight: 8 }}>删除</Button><Button onClick={reset}>重置</Button></div></Card>);
};

usePrevious – 获取前一个值

usePrevious 用于获取状态的前一个值。

import React, { useState } from "react";
import { usePrevious } from "ahooks";
import { Button, Card } from "antd";const UsePreviousExample = () => {const [count, setCount] = useState(0);const previousCount = usePrevious(count);return (<Card title="usePrevious 获取前一个值"><div style={{ marginBottom: 16 }}><p><strong>当前值:</strong> {count}</p><p><strong>前一个值:</strong> {previousCount}</p></div><div><Button onClick={() => setCount(count + 1)} style={{ marginRight: 8 }}>增加</Button><Button onClick={() => setCount(count - 1)}>减少</Button></div></Card>);
};

useRafState – RAF 状态管理

useRafState 用于在 requestAnimationFrame 中更新状态。

import React from "react";
import { useRafState } from "ahooks";
import { Button, Card } from "antd";const UseRafStateExample = () => {const [position, setPosition] = useRafState({ x: 0, y: 0 });const handleMouseMove = (e) => {setPosition({ x: e.clientX, y: e.clientY });};return (<Card title="useRafState RAF 状态管理"><divstyle={{height: 200,border: "1px solid #d9d9d9",position: "relative",marginBottom: 16,}}onMouseMove={handleMouseMove}><divstyle={{position: "absolute",left: position.x - 10,top: position.y - 10,width: 20,height: 20,backgroundColor: "red",borderRadius: "50%",}}/><p style={{ position: "absolute", bottom: 0, left: 0 }}>鼠标位置: ({position.x}, {position.y})</p></div></Card>);
};

useSafeState – 安全状态管理

useSafeState 用于在组件卸载后避免状态更新。

import React from "react";
import { useSafeState } from "ahooks";
import { Button, Card } from "antd";const UseSafeStateExample = () => {const [count, setCount] = useSafeState(0);const handleAsyncUpdate = () => {setTimeout(() => {setCount(count + 1);}, 2000);};return (<Card title="useSafeState 安全状态管理"><div style={{ marginBottom: 16 }}><p><strong>计数:</strong> {count}</p><p style={{ fontSize: "12px", color: "#666" }}>点击按钮后 2 秒更新，如果在更新前组件卸载，不会报错</p></div><div><Button onClick={() => setCount(count + 1)} style={{ marginRight: 8 }}>立即更新</Button><Button onClick={handleAsyncUpdate}>异步更新</Button></div></Card>);
};

useGetState – 获取状态函数

useGetState 返回一个获取当前状态的函数。

import React from "react";
import { useGetState } from "ahooks";
import { Button, Card } from "antd";const UseGetStateExample = () => {const [count, setCount, getCount] = useGetState(0);const handleLogCount = () => {console.log("当前计数:", getCount());};return (<Card title="useGetState 获取状态函数"><div style={{ marginBottom: 16 }}><p><strong>计数:</strong> {count}</p></div><div><Button onClick={() => setCount(count + 1)} style={{ marginRight: 8 }}>增加</Button><Button onClick={handleLogCount}>打印当前值</Button></div></Card>);
};

useResetState – 重置状态

useResetState 用于重置状态到初始值。

import React from "react";
import { useResetState } from "ahooks";
import { Button, Card, Input } from "antd";const UseResetStateExample = () => {const [name, setName, resetName] = useResetState("张三");const [age, setAge, resetAge] = useResetState(25);return (<Card title="useResetState 重置状态"><div style={{ marginBottom: 16 }}><Inputplaceholder="姓名"value={name}onChange={(e) => setName(e.target.value)}style={{ marginBottom: 8 }}/><Inputplaceholder="年龄"value={age}onChange={(e) => setAge(Number(e.target.value))}style={{ marginBottom: 8 }}/></div><div><Button onClick={resetName} style={{ marginRight: 8 }}>重置姓名</Button><Button onClick={resetAge} style={{ marginRight: 8 }}>重置年龄</Button><ButtononClick={() => {resetName();resetAge();}}>全部重置</Button></div></Card>);
};

状态管理类 hooks 速查表

Hook 名称用途描述
useSetState对象状态管理管理对象类型状态，提供类似 setState 的 API
useBoolean布尔值状态管理管理布尔值状态，提供切换方法
useToggle切换状态管理在两个值之间切换状态
useUrlStateURL 状态管理将状态同步到 URL 参数中
useCookieStateCookie 状态管理将状态同步到 Cookie 中
useLocalStorageState本地存储状态管理将状态同步到 localStorage 中
useSessionStorageState会话存储状态管理将状态同步到 sessionStorage 中
useDebounce防抖状态创建防抖状态，延迟更新值
useThrottle节流状态创建节流状态，限制更新频率
useMapMap 状态管理管理 Map 类型的状态
useSetSet 状态管理管理 Set 类型的状态
usePrevious获取前一个值获取状态的前一个值
useRafStateRAF 状态管理在 requestAnimationFrame 中更新状态
useSafeState安全状态管理在组件卸载后避免状态更新
useGetState获取状态函数返回一个获取当前状态的函数
useResetState重置状态重置状态到初始值

 React强大且灵活hooks库——ahooks入门实践之状态管理类hook（state）详解 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯

http://www.xdnf.cn/news/15366.html

相关文章：

  • 【C++】多线程同步三剑客介绍
  • AutoLabor-ROS-Python 学习记录——第一章 ROS概述与环境搭建
  • leetGPU解题笔记（1）
  • STM32-第六节-TIM定时器-2（输出比较）
  • 【芯片笔记】ADF4159
  • 【论文阅读】AdaptThink: Reasoning Models Can Learn When to Think
  • 【Java Stream】基本用法学习
  • sql初学见解
  • 2025上海市“星光计划“信息安全管理与评估赛项二三阶段任务书
  • Spring高级特性——反射和动态代理的性能优化
  • Python---上下文管理器
  • 移动端设备本地部署大语言模型（LLM）
  • 无需付费即可利用AI消除音频噪声和生成字幕
  • 浏览器渲染原理与性能优化全解析
  • 【零基础入门unity游戏开发——unity3D篇】3D光源之——unity反射和反射探针技术
  • 在线事务处理OLTP(Online Transaction Processing）负载是什么？
  • 08.如何正确关闭文件
  • QML 自定义Model基础之QAbstractListModel
  • iw 命令 -- linux 无线管理
  • python kivy 打包apk
  • Ampace厦门新能安科技Verify 测评演绎数字推理及四色测评考点分析、SHL真题题库
  • 入职华为od一个月的感受
  • 用 Node.js 构建模块化的 CLI 脚手架工具，从 GitHub 下载远程模板
  • 【Vue】浏览器缓存 sessionStorage、localStorage、Cookie
  • 初级网安作业笔记1
  • 人工智能之数学基础:神经网络的矩阵参数求导
  • S7-1200 与 ET200SP：PROFINET 设备关键数据 IP 地址、MAC 地址及 MRP 环状态获取
  • Spring Boot RESTful API 设计指南：查询接口规范与最佳实践
  • 在新版本的微信开发者工具中使用npm包
  • java8 ConcurrentHashMap 桶级别锁实现机制