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

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

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

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

javascript 复制代码
/**

* 监听参数变化

*/

this.watcher = this.animatedViewHeight.addListener((v) => {

 let height = this.props?.maxHeight < v?.value ? this.props?.maxHeight : v?.value

 this.props?.watcher && this.props?.watcher(height);

})

//在父组件接受并setState修改组件

<DraggableView

 initialHeight={initialHeight}

 maxHeight={deviceInfo.phone_screen_height * 0.75} watcher={(v) => {

 this.setState({ buttonBottom: v || initialHeight })

}}>

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

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

javascript 复制代码
<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

javascript 复制代码
//定义动画属性
this.animatedButtonBottom = new Animated.Value(initialHeight * 1)//动态按钮位置高度
javascript 复制代码
//在动画组件使用
<Animated.View style={[styles.toLocationDetail, { bottom: this.animatedButtonBottom }]}/>
相关推荐
爱看书的小沐2 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
水冗水孚2 小时前
React中使用map+area标签实现img图片特定区域标记功能(可用Photoshop精准拾取对应点位)
react.js·html·photoshop
井柏然2 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
aklry3 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然3 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
骑自行车的码农4 小时前
React 合成事件的设计原理 3
react.js
xjf77114 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试
Roadinforest5 小时前
水墨风鼠标效果实现
前端·javascript·vue.js
右子5 小时前
HTML Canvas API 技术简述与关系性指南
前端·javascript·canvas
Lotzinfly5 小时前
10个JavaScript浏览器API奇淫技巧你需要掌握😏😏😏
前端·javascript·面试