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

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

news 2025/7/14 6:37:12

什么是 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.dtcms.com/a/277276.html

相关文章：

  • 在NDK开发中如何正确创建JNI方法
  • Perl小骆驼学习笔记 - 9. 用正则表达式处理文本
  • 香港服务器Python自动化巡检脚本开发与邮件告警集成
  • 《雨下小暑》诗赏——小暑时节暴雨之晨的清凉视听（智普清言）
  • iOS UI视图面试相关
  • 从儿童涂鸦到想象力视频：AI如何重塑“亲子创作”市场？
  • [特殊字符]使用 Nginx 将 HTTP 重定向到 HTTPS
  • Anaconda3安装教程（Windows）
  • 低代码引擎核心技术：OneCode常用动作事件速查手册及注解驱动开发详解
  • Web应用性能优化之数据库查询实战指南
  • 楼宇自动化：Modbus 在暖通空调（HVAC）中的节能控制（二）
  • 【Linux系统与网络编程】06：进程间通信
  • Day 19: 标准库巡礼：Python的“百宝箱”
  • c++学习之---红黑树的实现
  • CentOS 7 升级系统内核级库 glibc 2.40 完整教程
  • MSVCP*.dll、vcruntime*.dll缺失或损坏，以及.NET Framework相关问题，解决办法
  • 移动端设备本地部署大语言模型（LLM）
  • 【论文阅读】基于注意力机制的冥想脑电分类识别研究（2025）
  • LabVIEW智能避障小车
  • C/C++数据结构之多维数组
  • vue3 el-select默认选中
  • Java_Springboot技术框架讲解部分（二）
  • 【Linux内核模块】模块加载函数--从启动到运行的幕后推手
  • MySQL 分表功能应用场景实现全方位详解与示例
  • 算法学习笔记：19.牛顿迭代法——从原理到实战，涵盖 LeetCode 与考研 408 例题
  • 先“跨栏”再上车 公交站台装70厘米高护栏 公司回应
  • Mock 数据的生成与使用全景详解
  • 知识蒸馏：模型压缩与知识迁移的核心引擎
  • 通过同态加密实现可编程隐私和链上合规
  • GraphRAG：融合知识图谱与RAG的下一代信息检索框架