在Jetpack Compose中优雅的使用防抖、节流

写在前面

本文中提及的use开头的函数,都出自与我的 ComposeHooks 项目,它提供了一系列 React Hooks 风格的状态封装函数,可以帮你更好的使用 Compose,无需关系复杂的状态管理,专心于业务与UI组件。

这是系列文章的第8篇,前文:

  • 在Compose中使用useRequest轻松管理网络请求
  • 在Compose中使用状态提升?我提升个P…Provider
  • 在Compose中父组件如何调用子组件的函数?
  • 在Compose中方便的使用MVI思想?试试useReducer!
  • 在Compose中像使用redux一样轻松管理全局状态
  • 在Compose中轻松使用异步dispatch管理全局状态
  • 在Jetpack Compose中管理网络请求竟然如此简单!

防抖、节流的概念不必细说,使用 ComposeHooks 可以帮助我们在Compose中轻松的使用防抖节流!

状态值进行防抖、节流

例如我们的状态来源是一个输入框,我们要对输入框的输入内容进行模糊匹配,这种场景就需要进行节流操作:

val (state, setState) = useState("")
val throttledState = useThrottle(value = state)TextField(value = state,onValueChange = setState,
)

我们使用 useStateTextField 组件创建状态,然后将状态值传入 useThrottle 即可;

现在我们直接使用 throttledState 传递给服务端即可;

与之前介绍的 useRequest 钩子一样,你可以通过 optionsOf 设置节流钩子的相应配置,默认配置如下:

data class ThrottleOptions internal constructor(var wait: Duration = 1.seconds, // 节流时长var leading: Boolean = true, // 是否在延迟开始前调用函数var trailing: Boolean = true, // 是否在延迟开始后调用函数
)

防抖操作与之类似,自己是效果不同而已:

val (state, setState) = useState("")
val debouncedState = useDebounce(value = state)TextField(value = state,onValueChange = setState,
)

防抖的默认值为:

data class DebounceOptions internal constructor(var wait: Duration = 1.seconds, // 防抖间隔var leading: Boolean = false, // 是否在延迟开始前调用函数var trailing: Boolean = true, // 是否在延迟开始后调用函数var maxWait: Duration = 0.seconds, // 最大等待时长,防抖超过该时长则不再拦截,默认为0(永远防抖)
) 

对函数进行防抖、节流

除了状态值的防抖节流,ComposeHooks 同样支持对函数进行防抖节流:

val (state, setState) = useState(0)
val throttledFn = useThrottleFn(fn = { setState(state + 1) })Text(text = "current: $stateFn")
TButton(text = "throttled +1") {/** Manual import:`import xyz.junerver.compose.hooks.invoke` */throttledFn()
}

我们可以给 useThrottleFn 传递一个函数闭包,这里是一个简单的计数器累加的函数,它的返回值是节流版的的函数,我们只需要将按钮的点击事件替换为这个throttledFn函数即可实现对原函数的节流操作!非常简单

tips: 同样的我们可以对函数进行防抖,代码几乎一样,我就不赘述了!

进阶用法

在上面的例子中,我们的原函数的签名是()->UnituseThrottleFnfn参数闭包同样支持外部参数的传入,还用上面的例子:

val (stateFn, setStateFn) = useState(0)
val throttledFn = useThrottleFn(fn = { params -> setStateFn((params[0] as? Int ?: 0) + 1) })Text(text = "current: $stateFn")
TButton(text = "throttled +1") {/** Manual import:`import xyz.junerver.compose.hooks.invoke` */throttledFn(Random.nextInt())
}

现在节流函数可以从外部接受参数,在一些场景下他很有必要,需要注意的是params的类型是Array<Any?>,你需要在闭包中对参数进行处理、转型

对副作用进行防抖、节流

与直接使用副作用区别不大,只是对副作用闭包进行了防抖节流:

val (stateEf, setStateEf) = useState(0)
val (result, setResult) = useState("")
useThrottleEffect(stateEf) {setResult("loading")// 与 effect相同,这里可以执行协程挂起函数val result = NetApi.SERVICE.userInfo("junerver")setResult(result.toString().subStringIf())
}Text(text = "deps: $stateEf")
TButton(text = "+1 trigger effect execute") {setStateEf(stateEf + 1)
}
Text(text = result)

这里的计数 stateEf 模拟一个快速变化的值,他会触发 effect 副作用闭包的执行,如果我们直接使用 useEffect 或者官方的的 LaunchedEffect 这个副作用闭包也会不停的执行。

但是使用 useThrottleEffect,他会节流执行副作用,与上面两个钩子一样,他的也可通过 optionsOf 配置具体的节流参数。

tips: 同样的我们可以对副作用进行防抖,代码几乎一样,我就不赘述了!

探索更多

项目开源地址:junerver/ComposeHooks

MavenCentral:hooks

implementation("xyz.junerver.compose:hooks:1.0.11")

欢迎使用、勘误、pr、star。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/822990.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c++学习笔记3,继承

一个类可以继承一个或多个类&#xff0c;这个类叫派生类&#xff0c;被继承的叫基类 class A{ }; class B{ }; class C{ }; class myclass :private A&#xff0c;protect B,public C//继承方式 类&#xff0c;多继承时之间用逗号间隔 { }继承方式决定对基类成员的访问权限&am…

网工交换技术基础——VLAN原理

1、VLAN的概念&#xff1a; VLAN(Virtual LAN)&#xff0c;翻译成中文是“虚拟局域网”。LAN可以是由少数几台家用计算机构成的网络&#xff0c;也可以是数以百计的计算机构成的企业网络。VLAN所指的LAN特指使用路由器分割的网络——也就是广播域。 2、VLAN的主要作用&#xf…

假期必备!一款超级强大的视频终端下载工具,简洁又强大,24.5K star【文末送福利】

马上要五一了&#xff0c;假期想必少不了娱乐看电影电视剧&#xff0c;之前介绍了 Gopeed 这个支持全平台的下载神器。 今天再给大家介绍一个超级棒的命令行下载神器项目&#xff1a;Lux。 项目简介 Lux是一款用 Go 语言开发的视频下载库和 ClI 工具&#xff0c;拥有简洁的命…

c#使用OleDb库更改Access数据库的密码

技术要点 流程 使用OleDbConnection对象连接数据库。使用OleDbCommand对象执行修改数据库密码的操作。 技术要点 注意使用OleDbConnection对象时&#xff0c;需要使用独占方式打开&#xff0c;使用此种方式打开&#xff0c;才能够修改数据库的密码&#xff0c;方式为在连接…

【已解决】CondaError: Downloaded bytes did not match Content-Length

&#x1f60e; 作者介绍&#xff1a;我是程序员行者孙&#xff0c;一个热爱分享技术的制能工人。计算机本硕&#xff0c;人工制能研究生。公众号&#xff1a;AI Sun&#xff0c;视频号&#xff1a;AI-行者Sun &#x1f388; 本文专栏&#xff1a;本文收录于《AI实战中的各种bug…

SNMP-详解指南

目录 SNMP介绍 SNMP的工作机制轮询 SNMP的MIB&#xff08;管理信息库&#xff09; SNMP是基于UDP协议 SNMP介绍 SNMP&#xff08;Simple Network Management Protocol&#xff0c;简单网络管理协议&#xff09;是一种广泛应用于互联网上的网络管理协议。它提供了一种标准化…

springboot 人大金仓 kingbase-备份还原,命令中带密码,支持window和linux

命令带密码参考 Java代码实现国产人大金仓数据库备份还原需求-CSDN博客文章浏览阅读818次&#xff0c;点赞16次&#xff0c;收藏12次。本人在一次项目中&#xff0c;遇到了需要在系统管理中提供给用户备份还原系统数据的功能&#xff0c;由于项目特殊性&#xff0c;项目底层数…

vue实现文字转语音的组件,class类封装,实现项目介绍文字播放(2024-04-17)

1、项目界面截图 2、封装class类方法&#xff08;实例化调用&#xff09; // 语音播报的函数 export default class SpeakVoice {constructor(vm, config) {let that thisthat._vm vmthat.config {text: 春江潮水连海平&#xff0c;海上明月共潮生。滟滟随波千万里&#xf…

微信小程序前端获取OpenID和session_key

微信小程序前端获取OpenID和session_key code2Session: https://api.weixin.qq.com/sns/jscode2session?appidAPPID&secretSECRET&js_codeJSCODE&grant_typeauthorization_code wx.login({success: (res) > {console.log(res.code) //拿到codeuni.request({u…

docker搭建Medusa

Medusa 是一个为 Apache Cassandra 和 Scylla 数据库设计的数据备份工具&#xff0c;它支持多种存储后端&#xff0c;包括本地存储和云存储服务&#xff0c;如 Google Cloud Storage 和 Amazon S3。Medusa 使得数据库备份和恢复过程更加灵活和可靠。 功能介绍 高性能备份&…

开展在即!中银富登邀您共赴雄安2024数字城市展览会(雄安建博会)

中银富登村镇银行&#xff1a;雄安新区金融创新的领航者 在即将举办的2024雄安数字城市建设展览会上&#xff0c;中银富登村镇银行将以其在金融创新和普惠金融服务领域的卓越表现&#xff0c;成为展会的一大亮点。作为雄安新区首家全国性银行业金融机构总部&#xff0c;中银富…

DolphinScheduler 调度工作流报错 Host key verification failed.

文章目录 出现问题错误原因及解决方法1.SSH 免密登录配置失败、失效2.不存在该租户 建议 出现问题 在执行调度任务时&#xff0c;失败了&#xff0c;查看日志发现错误 —— Host key verification failed. 错误原因及解决方法 1.SSH 免密登录配置失败、失效 这种情况就检查…

请求的数据类型{ }{[ ]} 解析

一、案例区别 1.1源码 var saveInBrowserDeviceInfoStr localStorage.getItem(SaveInBrowserDeviceInfo); var saveInBrowserDeviceInfo;if (saveInBrowserDeviceInfoStr) {console.log(存放在浏览器的设备信息&#xff08;字符串&#xff09;&#xff1a; saveInBrowserDe…

黄仁勋最新访谈:GPU性能的革命性提升与AI未来

近期&#xff0c;英伟达CEO黄仁勋与美国CNBC知名主持人、股评人吉姆克莱默&#xff08;Jim Cramer&#xff09;在《Mad Money》节目中展开了一场关于技术未来和人工智能的对话。访谈里&#xff0c;黄仁勋不仅提到了英伟达在过去八年中将AI算力性能提高1000倍&#xff0c;还预言…

程序中调用DB存储过程记得异常处理时尝试回滚可能存在的事务

程序中调用DB过程要注意这种情况&#xff1a; 有些存储过程需要执行比较久&#xff0c;在数据库中直接跑本身没有出错&#xff0c;但从程序中调用该存储过程会由于超时进入程序异常处理&#xff0c;这时数据库后台依然在跑着该存储过程&#xff0c;如果该存储过程中有启用事务…

Linux:如何删除指定时间之前修改的文件

1、与文件有关的时间 在说明如何删除符合这种要求的文件之前&#xff0c;先来看看与文件有关的有哪些时间 简名全名中文名含义atimeaccess time访问时间文件中的数据最后被访问的时间mtimemodify time修改时间文件中的数据最后被修改的时间ctime change time变化时间文件的元…

对装饰器模式的理解

目录 一、场景二、面对场景中的新需求&#xff0c;我们怎么办&#xff1f;1、暴力法&#xff1a;直接修改原有的代码。2、子类继承法&#xff1a;既然要增强行为&#xff0c;那我搞一个子类&#xff0c;覆写不就完事了&#xff1f;3、装饰器模式 三、对装饰器模式的思考1、从代…

Rust---泛型(Generics)

目录 泛型和多态泛型参数泛型的使用结构体中使用枚举中使用方法中使用函数中使用为特定的类型参数提供特定的方法实现泛型和多态 泛型允许在编写代码时使用抽象类型来代替具体类型,可以在不同的数据类型上工作,同时避免代码重复。通过泛型,我们可以编写一次代码,然后在需要…

AI编程工具助手

随着人工智能技术的发展&#xff0c;AI编程工具助手应运而生。 AI编程工具助手通过利用人工智能技术&#xff0c;尤其是机器学习和自然语言处理&#xff0c;来辅助软件开发过程中的代码编写、调试、优化等工作。这些工具通过提供代码补全、代码生成、代码审查、性能优化等功能…