React Native 滑块 onValueChange 调用 setState 使滑块滞后 [英] React Native slider onValueChange calling setState makes slider lag

问题描述

由于 setState 在状态中更改了滑块的值，并且在实际滑块移动之后发生，因此滑块滞后了很多.我见过人们使用去抖动来解决这个问题，但效果不佳，我觉得必须有一个更实用的解决方案.去抖动只会使问题不那么明显，并不能从根本上解决问题.

Since setState changes the value of the slider in the state and happens after the actual slider movement, the slider lags quite a bit. I've seen people use debouncing to fix this, but it doesn't work so well and I feel like there must be a more pragmatic solution. Debouncing simply makes the issue less apparent, it doesn't fix it at the root.

有什么想法吗?

<!-- language: lang-js -->
<Slider
    value={this.state.someValue}
    maximumValue={this.state.sliderMaximumValue}
    minimumValue={0}
    onValueChange={(someValue) => this.setState({someValue})}
/>

推荐答案

你可以通过简单的不传递值 支持 .所以，像这样:

You can achieve what you want by simply not passing in the value prop to the <Slider />. So, like this:

<!-- language: lang-js -->
<Slider
  // value={this.state.someValue} // commented out :D
  maximumValue={this.state.sliderMaximumValue}
  minimumValue={0}
  onValueChange={(someValue) => this.setState({someValue})}
/>

就是这样！:D

但是！如果您需要不断显示滑块的变化值，(根据我的需要)您可以这样做:

But! If you need to constantly display a changing value of the slider, (as I needed) you can do this:

在您的组件中为一个实际状态创建 2 个状态.一个用于显示，一个作为要传递给 <Slider/> 的实际值(在这种情况下，您不需要注释掉 value> 道具).

Create 2 states in your component for one actual piece of state. One to display, and one to be the actual value to be passed to the <Slider /> (and in this case you don't need to comment out the value prop).

我有一个组件，我必须在其中显示不断变化的滑块值，而不会使滑块滞后.所以我这样做了:

I had a component where I had to display the constantly changing slider value, without the slider lagging. So I did this:

const [displayTotalQuantity, setDisplayTotalQuantity] = useState(FUEL_AMOUNT_MINIMUM);  
const [totalQuantity, setTotalQuantity] = useState(FUEL_AMOUNT_MINIMUM);

<Text> {displayTotalQuantity} </Text>
<Slider
   style={slider.baseStyles}
   step={STEP}
   value={totalQuantity}
   minimumValue={MINIMUM}
   maximumValue={MAXIMUM}
   minimumTrackTintColor={mainColors.irisBlue}
   maximumTrackTintColor={mainColors.sliderMaxTintGray}
   thumbTintColor={mainColors.irisBlue}
   onSlidingComplete={value => setTotalQuantity(value)}
   onValueChange={value => setDisplayTotalQuantity(value)}
 />

因此，您需要通过 value 属性传递实际状态，但仅更新它onSlidingComplete.另一方面，在每次更改时更新 display 状态，即 onValueChange 并将其显示在某个文本组件中.

So, you need to pass the actual state through the value prop, but update it only onSlidingComplete. On the other hand, update the display state on each change, i.e. onValueChange and display it in some text component.

我希望我说清楚了.如果没有，请询​​问，我会详细说明.:)

I hope I made myself clear. If not, ask and I will elaborate. :)

这篇关于React Native 滑块 onValueChange 调用 setState 使滑块滞后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！