记ahooks学习，属个人理解

最新推荐文章于 2025-08-22 19:33:51 发布

原创最新推荐文章于 2025-08-22 19:33:51 发布 · 245 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #前端

一、useBoolean

更优美的管理一些布尔值的hook

import React from 'react';
import { useBoolean } from 'ahooks';

export default () => {

//通过这个useBoolean的钩子创建了三个中继开关api，来共同控制state的0、1变化，此处初值是true
const [state, { toggle, setTrue, setFalse }] = useBoolean(true);

return (
<div>
<p>Effects：{JSON.stringify(state)}</p>//打印state的值
<p>
<button type="button" onClick={toggle}>//通过onClick触发api中继开关Toggle，state值改变，取反
Toggle
</button>
<button type="button" onClick={setFalse} style={{ margin: '0 16px' }}>

//同理上一个按钮，这个api只负责置为false
Set false
</button>
<button type="button" onClick={setTrue}>//同理api
Set true
</button>
</p>
</div>
);
};

二、useSetState

用法跟class组件的this.setState基本一致

import React from 'react';
import { useSetState } from 'ahooks';

//写了三个接口字段。最后一个是自定义key value

interface State {
hello: string;
count: number;
[key: string]: any;
}

设置了初始值

export default () => {
const [state, setState] = useSetState<State>({
hello: '',
count: 0,
});

return (
<div>
<pre>{JSON.stringify(state, null, 2)}</pre>
<p>
<button type="button" onClick={() => setState({ hello: 'world' })}>
set hello
</button>
<button type="button" onClick={() => setState({ foo: 'bar' })} style={{ margin: '0 8px' }}>
set foo
</button>

//回调函数的传参默认值函数中加1
<button type="button" onClick={() => setState((prev) => ({ count: prev.count + 1 }))}>
count + 1
</button>
</p>
</div>
);
};