简单状态管理
useSetState管理临时状态
export default () => {
const [state, setState] = useSetState({
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>
<button type="button" onClick={() => setState((prev) => ({ count: prev.count + 1 }))}>
count + 1
</button>
</p>
</div>
);
};
useBoolean
优雅的管理切换状态
import React from 'react';
import { useBoolean } from 'ahooks';
export default () => {
const [state, { toggle, setTrue, setFalse }] = useBoolean(true);
return (
<div>
<p>Effects:{JSON.stringify(state)}</p>
<p>
<button type="button" onClick={() => toggle()}>
Toggle
</button>
<button type="button" onClick={setFalse} style={{ margin: '0 16px' }}>
Set false
</button>
<button type="button" onClick={setTrue}>
Set true
</button>
</p>
</div>
);
};
useToggle
用于在两个状态值间切换的 Hook。
import React from 'react';
import { useToggle } from 'ahooks';
export default () => {
const [state, { toggle }] = useToggle();
return (
<div>
<p>Effects:{`${state}`}</p>
<p>
<button type="button" onClick={() => toggle()}>
Toggle
</button>
<button type="button" onClick={() => toggle(false)} style={{ margin: '0 8px' }}>
Toggle False
</button>
<button type="button" onClick={() => toggle(true)}>
Toggle True
</button>
</p>
</div>
);
};