react-native - React Native Slider - onValueChange 调用次数过多

Question

我正在我的应用程序上创建一个 slider ，但每当我开始拖动拇指时，它就会一直闪烁。这是因为我直接使用状态并在它发生变化时存储它。我希望在我移动它时不仅在我停止时更新该值。尝试在状态之外使用 forceUpdate() 的公共(public)变量，但它发生了同样的事情，多次更新滞后很多。

这是我用来创建 slider 的代码

export default class Profile extends Component {

constructor(props) {
   super(props)
   this.state = { age: 18 }
  } 

  render() {    

    return (
      <View style={styles.container}>
        <Slider
         style={{ width: 300 }}
         step={1}
         minimumValue={18}
         maximumValue={71}
         value={this.state.age}
         onValueChange={val => this.setState({ age: val })}
        />
        <Text style={styles.welcome}>
          {this.state.age}
        </Text>            
      </View>
    );
  }
}

为了停止闪烁，我使用 onSlidingComplete 参数来更新状态，但这只会在我从组件上松开手指时触发。不是预期的效果。

我应该在这个 setState 上添加去抖动或其他东西吗？

Answer 1

您可以消除或限制 setState 调用。使用 Lodash:

....
onValueChange={_.debounce(this.setAge, 33)} // 30 updates per second
onValueChange={_.debounce(this.setAge, 16)} // 60 updates per second (too much!)
....

setAge(age) {
    // Don't forget to bind this function to your component on the Constructor function!
    this.setState({ age })
}