本文主要是介绍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 }]}/>这篇关于React native 使用Animated 优化连续setState 性能问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
