当前位置: 首页 > news >正文

React native 使用Animated 优化连续setState 性能问题

再部分场景下我们需要连续更新state刷新页面。一般情况刷新使用setstate没有问题,当需要连续刷新的情况会有明显的性能问题。

场景:自定义可拖动抽屉组件 新增需求在抽屉活动是更新主页面组件样式,此时需要动态传递抽屉高度修改主页组件属性。

实现:在原有组件增加动画属性的监听:

/*** 监听参数变化*/this.watcher = this.animatedViewHeight.addListener((v) => {let height = this.props?.maxHeight < v?.value ? this.props?.maxHeight : v?.valuethis.props?.watcher && this.props?.watcher(height);})//在父组件接受并setState修改组件<DraggableViewinitialHeight={initialHeight}maxHeight={deviceInfo.phone_screen_height * 0.75} watcher={(v) => {this.setState({ buttonBottom: v || initialHeight })}}>

问题:由于动画属性的刷新过于平凡,调用setState明显卡顿

优化:使用Animated动画替换,使自定义回调变为一个动画驱动

<DraggableView initialHeight={initialHeight} maxHeight={deviceInfo.phone_screen_height * 0.75} watcher={Animated.event([{}//dy:this.animatedViewHeight],{listener: (v) => {this.animatedButtonBottom.setValue(v)}})}>

  第一个中括号重定义动画接受属性 如需要过滤特定属性使用{x:y.value}方式实现,此时第二个大括号中的参数v 相当于 y.value. 。不做操作则v相当于回调回传的值y

//定义动画属性
this.animatedButtonBottom = new Animated.Value(initialHeight * 1)//动态按钮位置高度
//在动画组件使用
<Animated.View style={[styles.toLocationDetail, { bottom: this.animatedButtonBottom }]}/>

http://www.lryc.cn/news/374167.html

相关文章:

  • Qt中的事件循环
  • JVM常用概念之线程本地分配缓冲区(ThreadLocal Allocation Buffer,TLAB)
  • 大模型生成的常见Top-k、Top-p、Temperature参数
  • ppt添加圆角矩形,并调整圆角弧度方法
  • 测评要求+基本措施+对应产品
  • 什么是git?
  • C/C++中内存开辟与柔性数组
  • 编程App软件优化是什么
  • 爱了爱了,11款超良心App推荐!
  • Linux基础指令(二)(文件、权限等)
  • 爆火的治愈系插画工具又来了,额度居然有18w,根本花不完?
  • Qt 实战(4)信号与槽 | 4.3、信号连接信号
  • Day 16:3040. 相同分数的最大操作数目II
  • Go基础编程 - 07 - 字典(map)及其约束
  • WebSocket 快速入门 与 应用
  • 使用Spring Cloud设计电商系统架构
  • 揭开 Docker 容器的神秘面纱:深入理解容器原理
  • Elasticsearch:Open Crawler 发布技术预览版
  • C 语言连接MySQL 数据库
  • 【探索Linux】P.34(HTTPS协议)
  • Python 踩坑记 -- 调优
  • 英特尔澄清:Core i9处理器崩溃问题根本原因仍在调查,eTVB非主因
  • python实战根据excel的文件名称这一列的内容,找到电脑D盘的下所对应的文件位置,要求用程序实现
  • LVS ipvsadm命令的使用(二)
  • Java面向对象-接口
  • 怎么不使用springboot Helper或Spring Initializr来创建spring项目
  • STM32CubeMX配置-RTC周期唤醒
  • js如何添加新元素到数组中
  • Python变量和基本数据类型
  • 嵌入式数据库_1.嵌入式数据库的定义及特点和分类