javascript - React Native slider onValueChange 调用 setState 使 slider 滞后

Question

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

有什么想法吗？

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

Answer 1

您只需不传入 value 即可实现您想要的效果支持 <Slider /> .所以，像这样:

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

就是这样! :D

但是! 如果您需要不断显示 slider 的变化值，(正如我所需要的)您可以这样做:

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

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

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 传递实际状态prop，但只更新它 onSlidingComplete .另一方面，更新 display每次更改的状态，即 onValueChange并将其显示在一些文本组件中。

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