我们正在使用一个滑块来过滤时间。目前,当我们加载到手机上,并使用它有这么多的滞后,它似乎是在物理显示的时间,因为你滑动滑块。以下是我们的代码,任何想法,为什么可能会发生这种情况?我们需要更新我们是如何计算我们的价值(我们尝试将其作为股票值,设置状态,但仍然看到滞后,所以我们不相信是这样)。目前,我们尝试在此滑块上显示24小时。
谢谢!
注意:我们正在查看代码,甚至删除了冗余的this.setState({value:这个.limitMarkers(value)}在函数调用中以及函数本身。这没有帮助:(。如果任何人有任何想法,请让我们知道!
<Slider
minimumTrackTintColor={'#FFCD00'}
maximumTrackTintColor={'#e0e0e0'}
thumbStyle={{color: '#FFCD00', backgroundColor: '#FFCD00'}}
value={this.state.sliderValue}
maximumValue={this.state.maximumValue}
step={.5}
onValueChange={(value) => this.setState({value: this.limitMarkers(value)}) }
onSlidingComplete={ (value)=>{ SOME CODE }></Slider>
限值标记功能
limitMarkers(i){
var decimals = Math.round((i - Math.floor(i))*59);
i = Math.floor(i);
var hours = currentHour+i;
var time;
if(hours > 12){
if(hours > 24){
if(hours > 36){
hours = hours - 36;
time = ' PM';
labelIsTomorrow = true;
}
else{
hours = hours - 24;
time = ' AM';
labelIsTomorrow = true;
}
}
else{
hours = hours - 12;
time = ' PM'
labelIsTomorrow = false;
}
}
else {
time = ' AM'
labelIsTomorrow = false;
}
if(decimals < 10) decimals='0'+decimals;
this.setState({
label: hours+":"+(decimals),
TOD: time
});
return hours;
}
2条答案
按热度按时间enxuqcxy1#
代码工作正常,这是因为我们在调试模式下运行应用程序。一旦我们将其置于发布模式并删除调试移动,滞后就消失了。
2eafrhcq2#
我也遇到过同样的问题,当我对什么会导致“滞后”做了一些研究时,我遇到了一些提示:
1.值更新是否导致重新渲染?
如果值更新导致一个或多个组件(将该值作为 prop 的组件)重新呈现,则这可能是问题所在。
可能的解决方案:尝试将值与任何可能导致不必要呈现的属性分开。如果外部组件共享太多有状态数据,可以将它们移到父组件中。
1.值更新是多余的还是不具有时间敏感性?
可能的解决方案:在 prop 包含该值的任何组件中尝试
React.useMemo
,以缓存您可以缓存的任何计算。