React Native 滑块 onValueChange 调用 setState 使滑块滞后

Question

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

有任何想法吗？

<!-- 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

但！如果您需要不断显示滑块的变化值，（根据我的需要）您可以这样做：

在您的组件中为一个实际状态创建 2 个状态。一个用于显示，一个作为要传递给 the 的实际值<Slider />（在这种情况下，您不需要注释掉valueprop）。

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

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)}
 />

所以，你需要通过valueprop传递实际状态，但只更新它onSlidingComplete。另一方面，display在每次更改时更新状态，即onValueChange并将其显示在某个文本组件中。

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

Answer 2

我建议使用onSlidingComplete而不是onValueChange因为它只会在用户操作结束时设置状态（并刷新视图）。

编辑 这不会影响您对滑块数字显示值的更新，如文档所述：

这不是受控组件，您不需要在拖动过程中更新值。