状态类 Hooks

@mbjia/hooks

状态类 Hooks

用于管理弹窗开关、输入值、布尔切换等组件本地状态。

适合管理组件本地状态，例如弹窗开关、输入值、布尔切换等。

useModal

控制弹窗、抽屉、浮层等 open 状态。

const useModal = (options?: { defaultOpen?: boolean }) => {
  return {
    open: boolean,
    toggle: () => void,
    closeModal: () => void,
    openModal: () => void,
  }
}

const { open, openModal, closeModal, toggle } = useModal({ defaultOpen: false })

入参：

字段	类型	必填	默认值	说明
defaultOpen	boolean	否	false	初始是否打开。

返回值：

字段	类型	说明
open	boolean	当前打开状态。
toggle	() => void	切换状态。
closeModal	() => void	关闭。
openModal	() => void	打开。

useInputChange

管理输入框值，onChange 同时支持字符串和原生 input change 事件。

const useInputChange = (initialValue = '') => {
  return {
    value: string,
    setValue,
    onChange: (v: string | React.ChangeEvent<HTMLInputElement>) => void,
  }
}

const input = useInputChange('')

<input value={input.value} onChange={input.onChange} />

入参：

参数	类型	默认值	说明
initialValue	string	''	初始值。

返回值：

字段	类型	说明
value	string	当前输入值。
setValue	(value: string) => void	直接设置值。
onChange	(v: string | ChangeEvent<HTMLInputElement>) => void	输入变化处理函数。

useToggle

管理布尔值。调用 toggle() 会取反，调用 toggle(true/false) 会设置为指定值。

const useToggle: () => [boolean, (v?: boolean) => void]

const [checked, toggle] = useToggle()

toggle()
toggle(true)

返回值：

下标	类型	说明
0	boolean	当前布尔值。
1	(v?: boolean) => void	切换或指定布尔值。

useRadio

管理 AntD Radio 的选中值。

const radio = useRadio<T>({ defaultValue })

入参	类型	必填	说明
defaultValue	T	否	初始选中值。

返回值	类型	说明
value	T	当前值。
onChange	(e: RadioChangeEvent) => void	AntD Radio onChange 处理函数。
onReset	() => void	重置为默认值。

useUpdate

强制组件刷新。

const update = useUpdate()
update()

返回一个无参函数，调用后触发组件重新渲染。

useCreation

按依赖缓存创建结果，类似更稳定的 useMemo。

const value = useCreation(() => createExpensiveObject(), [id])

参数	类型	说明
fn	() => T	创建函数。
deps	DependencyList	依赖数组。

useReactive

把对象包装成响应式对象，修改属性时触发组件更新。

const state = useReactive({ count: 0 })
state.count += 1

参数	类型	说明
initialState	Record<string, any>	初始对象。