Skip to content

Effect

Jump to bottom
Junerver Hou edited this page Jul 21, 2025 · 2 revisions

useEffect

useEffect钩子用于在组件渲染后执行副作用操作，类似于React中的useEffect。

基本用法

// 无依赖项，组件挂载时执行一次
useEffect(Unit) {
    println("Component mounted")
}

// 带依赖项，依赖项变化时执行
val count = useState(0)
useEffect(count) {
    println("Count changed: ${count.value}")
}

// 多个依赖项
val (firstName, lastName) = useState("John") to useState("Doe")
useEffect(firstName, lastName) {
    // 当任一名字变化时触发
    println("Full name: ${firstName.value} ${lastName.value}")
}

useUpdateEffect

useUpdateEffect是一个类似于useEffect的钩子，但它会跳过首次渲染时的执行，只在依赖项更新时执行。

基本用法

val (state, setState) = useGetState(0)
useUpdateEffect(state) {
    // 这个效果只会在state更新时执行，首次渲染时不会执行
    println("useUpdateEffect deps change")
}

useDebounceEffect

useDebounceEffect是一个防抖版本的useEffect，它会在指定的等待时间后才执行效果，如果在等待时间内依赖项再次变化，则重新计时。

基本用法

val (state, setState) = useGetState(0)
val (result, setResult) = useGetState("")

useDebounceEffect(state.value) {
    setResult("Loading user data...")
    val userInfo = NetApi.userInfo("junerver")
    setResult(userInfo.toString())
}

默认配置：

  • 等待时间：1秒
  • leading：false（不在开始时立即执行）
  • trailing：true（在结束时执行）

useThrottleEffect

useThrottleEffect是一个节流版本的useEffect，它会限制效果执行的频率，确保效果在指定的时间间隔内最多执行一次。

基本用法

val (stateEf, setStateEf) = useGetState(0)
val (result, setResult) = useGetState("Ready")
val (requestCount, setRequestCount) = useState(0)

useThrottleEffect(stateEf.value) {
    setResult("Loading...")
    setRequestCount(requestCount + 1)
    try {
        val resp = NetApi.userInfo("junerver")
        setResult("Success: ${resp.toString()}")
    } catch (e: Exception) {
        setResult("Error: ${e.message}")
    }
}

默认配置：

  • 等待时间：1秒
  • leading：true（在开始时立即执行）
  • trailing：true（在结束时执行）

usePausableEffect

usePausableEffect提供了一种可以暂停、恢复和停止效果执行的方法。它对于需要临时禁用或永久终止的副作用非常有用。

基本用法

val (counter, setCounter) = useState(0)
val logs = useList<String>()

// 创建一个简单的可暂停效果，记录计数器变化
val effectHolder = usePausableEffect(counter) {
    logs.add("Counter changed to: $counter")
}

// 解构效果持有者以获取控制函数
val (stop, pause, resume) = effectHolder

// 使用控制函数
TButton(text = "Pause Effect") {
    effectHolder.pause()
    logs.add("Effect paused")
}

TButton(text = "Resume Effect") {
    effectHolder.resume()
    logs.add("Effect resumed")
}

TButton(text = "Stop Effect") {
    effectHolder.stop()
    logs.add("Effect stopped permanently")
}

useBackToFrontEffect & useFrontToBackEffect

这两个钩子用于在应用程序进入后台或返回前台时执行效果。

useBackToFrontEffect

useBackToFrontEffect在应用从后台返回前台时执行效果。与官方API不同，它只在再次进入前台时执行，首次渲染时不执行。

useBackToFrontEffect(deps) {
    // 当应用从后台返回前台时执行
    println("App returned to foreground")
}

useFrontToBackEffect

useFrontToBackEffect在应用进入后台时执行效果。

useFrontToBackEffect(deps) {
    // 当应用进入后台时执行
    println("App went to background")
}

这两个钩子对于需要在应用程序生命周期变化时执行特定操作的场景非常有用，例如暂停/恢复媒体播放、保存状态或调整网络连接等。

Clone this wiki locally