@kachina/hooks

从真实项目沉淀下来的 React Hooks 集合。

在线文档：https://tankchao.github.io/hooks

安装

npm install @kachina/hooks

Hooks

useSwitch

管理多个布尔开关及其关联的数据记录——适用于模态框、抽屉、标签面板等需要携带上下文数据的开关场景。

import { useSwitch } from '@kachina/hooks';

const [state, toggle, data] = useSwitch(['visible', 'editing']);

// 打开弹窗并附带数据
toggle({ visible: true }, { visible: { id: 1, name: 'foo' } });
// state.visible === true, data.visible === { id: 1, name: 'foo' }

// 一键关闭所有开关
toggle({ visible: false, editing: false });

参数	类型	说明
names	string[] | { [key: string]: boolean }[]	初始开关名称及其默认值

返回值	类型
[0] state	Record<string, boolean>
[1] toggle	(options, records?) => void
[2] data	Record<string, any>

useDialState

惰性缓存状态，只有在你主动触发时才重新计算——可以理解为手动控制的依赖触发器。

import { useDialState } from '@kachina/hooks';

const [result, refresh] = useDialState(() => expensiveComputation(a, b));
// result 保持稳定，直到 refresh() 被调用

参数	类型	说明
getValue	(...args: any[]) => T	返回缓存值的工厂函数

返回值	类型
[0] state	T
[1] refresh	() => void

useUpdateEffect

用法与 useEffect 完全一致，但会跳过首次挂载——只在依赖项实际变化时才执行。

import { useUpdateEffect } from '@kachina/hooks';

useUpdateEffect(() => {
  console.log('仅在 count 变化时打印，首次挂载不打印');
}, [count]);

useOneValidEffect

用法与 useEffect 类似，但只有当所有依赖项都为真值时才执行，且整个组件生命周期内最多执行一次。

import { useOneValidEffect } from '@kachina/hooks';

const { data: user } = useUser(); // 初始为 null

useOneValidEffect(() => {
  fetchPreferences(user.id); // user 加载完成后才执行
}, [user]);

useDictionary

批量请求字典/枚举/选项数据，内置 getLabel 转码函数，用于将编码映射为展示文案。适合依赖多个远程字典的表单和表格场景。

import { useDictionary } from '@kachina/hooks';

const { status, type, loading, getLabel } = useDictionary(
  { service: dictFetchService },
  [
    { name: 'status', params: { type: 'order' } },
    { name: 'type', params: { type: 'order' } },
  ],
  [],
);
// status、type —— DictOption[]
// getLabel(status, '1') —— 返回编码 '1' 对应的 label

参数	类型	说明
config.service	(list: DictRequestItem[]) => Promise<DictOption[][]>	按请求顺序返回选项数组的请求方法
dictList	DictRequestItem[]	字典配置数组
deps	unknown[]	重新请求的触发条件，语义与 useEffect 的 deps 一致

返回值	类型
[dictName]	DictOption[]
loading	boolean
getLabel	(options, value, defaultLabel?) => string

useQueryList

功能完整的带分页列表 Hook。围绕 Ant Design 表格设计：涵盖加载状态、搜索、分页、行选择、表单验证和重置。

import { useQueryList } from '@kachina/hooks';

const [data, search, setSelect, reset] = useQueryList(
  { service: listService },
  { payload: { status: 'active' }, validateFields: form.validateFields },
);

// data = { list, pagination, loading, selectedRowKeys, selectedRows }
// search() —— 触发首次查询或重新搜索
// setSelect(keys, rows) —— 更新选中行

参数	类型	说明
config	Config	请求服务、分页默认值、字段命名等配置
params	ParamsType	API 地址、静态载荷、表单验证方法
deps	DependencyList	值变化时触发重新查询

返回值	类型
[0] data	DataType
[1] search	(page?, pageSize?, emptyRows?) => Promise<boolean>
[2] setSelect	(keys, rows) => void
[3] reset	() => void

License

MIT