ComposeHooks 使用指南
ComposeHooks 是一个为 Jetpack Compose/Compose Multiplatform 设计的 Hooks 库，灵感来自 React Hooks 和 ahooks。
核心概念
所有 useXxx 函数都有对应的 rememberXxx 别名，选择你喜欢的命名风格。
快速参考
状态管理 Hooks
| Hook | 用途 | 示例 |
|---|
useState | 基础状态管理（推荐用 by 委托） | var state by useState("") |
useGetState | 解构使用的状态管理（推荐） | val (state, setState, getState) = useGetState(0) |
useBoolean | 布尔状态管理 | val (state, toggle, setValue, setTrue, setFalse) = useBoolean(false) |
useReducer | Redux 风格状态管理 | val (state, dispatch) = useReducer(reducer, initialState) |
useRef | 不触发重组的引用 | val ref = useRef(0) |
useList | 列表状态管理 | val list = useList(1, 2, 3) |
useMap | Map 状态管理 | val map = useMap("key" to "value") |
副作用 Hooks
| Hook | 用途 | 示例 |
|---|
useEffect | 副作用处理 | useEffect(dep) { /* effect */ } |
useMount | 组件挂载时执行 | useMount { loadData() } |
useUnmount | 组件卸载时执行 | useUnmount { cleanup() } |
useUpdateEffect | 跳过首次执行的 Effect | useUpdateEffect(dep) { /* effect */ } |
网络请求
| Hook | 用途 | 示例 |
|---|
useRequest | 网络请求管理 | val (data, loading, error, request) = useRequest(requestFn) |
工具 Hooks
| Hook | 用途 | 示例 |
|---|
useDebounce | 防抖值 | val debouncedValue = useDebounce(value) |
useThrottle | 节流值 | val throttledValue = useThrottle(value) |
useInterval | 定时器 | useInterval { tick() } |
useTimeoutFn | 延时执行 | useTimeoutFn(fn, 1.seconds) |
useUndo | 撤销/重做 | val (state, set, reset, undo, redo) = useUndo(initial) |
详细参考
常见模式
1. 受控组件
kotlin
1// 推荐：使用 useGetState 解构
2val (text, setText) = useGetState("")
3OutlinedTextField(
4 value = text.value,
5 onValueChange = setText,
6 label = { Text("输入") }
7)
8
9// 或使用 by 委托
10var text by useState("")
11OutlinedTextField(
12 value = text,
13 onValueChange = { text = it },
14 label = { Text("输入") }
15)
2. 解决闭包问题（来自 UseStateExample.kt）
kotlin
1// 方式1: 使用 useGetState 函数式更新
2val (state, setState) = useGetState("initial")
3LaunchedEffect(Unit) {
4 repeat(10) {
5 delay(1.seconds)
6 setState { "$it." } // 函数式更新，避免闭包问题
7 }
8}
9
10// 方式2: 使用 by 委托
11var byState by useState("initial")
12LaunchedEffect(Unit) {
13 repeat(10) {
14 delay(1.seconds)
15 byState += "." // 直接修改，无闭包问题
16 }
17}
18
19// 方式3: 使用 useLatestRef
20val (state, setState) = useState("initial")
21val stateRef = useLatestRef(state)
22LaunchedEffect(Unit) {
23 repeat(10) {
24 delay(1.seconds)
25 setState("${stateRef.current}.") // 通过 ref 获取最新值
26 }
27}
3. 网络请求（来自 Auto&Manual.kt）
kotlin
1// 自动请求
2val (userInfoState, loadingState, errorState) = useRequest(
3 requestFn = { NetApi.userInfo(it) },
4 optionsOf = {
5 defaultParams = "junerver" // 自动请求必须设置默认参数
6 }
7)
8val userInfo by userInfoState
9val loading by loadingState
10
11if (loading) {
12 Text(text = "loading ...")
13}
14userInfo?.let { Text(text = it.toString()) }
15
16// 手动请求
17val (repoInfoState, loadingState, errorState, request) = useRequest(
18 requestFn = { it: Tuple2<String, String> ->
19 NetApi.repoInfo(it.first, it.second)
20 },
21 optionsOf = {
22 manual = true
23 defaultParams = tuple("junerver", "ComposeHooks")
24 }
25)
26TButton(text = "request") { request() }
4. Redux 风格状态管理（来自 UseReducerExample.kt）
kotlin
1// 定义 State 和 Action
2data class SimpleData(val name: String, val age: Int)
3
4sealed interface SimpleAction {
5 data class ChangeName(val newName: String) : SimpleAction
6 data object AgeIncrease : SimpleAction
7}
8
9// 定义 Reducer
10val simpleReducer: Reducer<SimpleData, SimpleAction> = { prevState, action ->
11 when (action) {
12 is SimpleAction.ChangeName -> prevState.copy(name = action.newName)
13 is SimpleAction.AgeIncrease -> prevState.copy(age = prevState.age + 1)
14 }
15}
16
17// 使用
18val (state, dispatch) = useReducer(
19 simpleReducer,
20 initialState = SimpleData("default", 18),
21 middlewares = arrayOf(logMiddleware())
22)
23
24TButton(text = "Change Name") { dispatch(SimpleAction.ChangeName("Alice")) }
25TButton(text = "Increase Age") { dispatch(SimpleAction.AgeIncrease) }
26Text(text = "State: ${state.value}")
5. 列表操作（来自 UseListExample.kt）
kotlin
1val listState = useList(1, 2, 3)
2
3// 操作方法
4listState.add(4) // 添加
5listState.add(0, 0) // 插入
6listState.removeAt(0) // 删除
7listState.removeLast() // 删除最后一个
8listState[0] = 10 // 修改
9listState.clear() // 清空
10listState.shuffle() // 打乱
11
12// 配合 useListReduce
13val sum by useListReduce(listState) { a, b -> a + b }
6. 防抖输入（来自 UseDebounceExample.kt）
kotlin
1var inputValue by useState("")
2val debouncedValue by useDebounce(
3 value = inputValue,
4 optionsOf = {
5 wait = 500.milliseconds
6 }
7)
8
9OutlinedTextField(
10 value = inputValue,
11 onValueChange = { inputValue = it },
12 label = { Text("Type something...") }
13)
14
15Text(text = "Debounced: $debouncedValue")
