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

原创

已于 2024-06-14 15:47:35 修改 · 908 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript

于 2024-06-13 14:11:58 首次发布

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

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

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

/**

* 监听参数变化

*/

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动画替换，使自定义回调变为一个动画驱动