React JS滑块滞后

wgxvkvu9  于 2023-03-19  发布在  React
关注(0)|答案(2)|浏览(143)

我们正在使用一个滑块来过滤时间。目前,当我们加载到手机上,并使用它有这么多的滞后,它似乎是在物理显示的时间,因为你滑动滑块。以下是我们的代码,任何想法,为什么可能会发生这种情况?我们需要更新我们是如何计算我们的价值(我们尝试将其作为股票值,设置状态,但仍然看到滞后,所以我们不相信是这样)。目前,我们尝试在此滑块上显示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;
  }
enxuqcxy

enxuqcxy1#

代码工作正常,这是因为我们在调试模式下运行应用程序。一旦我们将其置于发布模式并删除调试移动,滞后就消失了。

2eafrhcq

2eafrhcq2#

我也遇到过同样的问题,当我对什么会导致“滞后”做了一些研究时,我遇到了一些提示:
1.值更新是否导致重新渲染?
如果值更新导致一个或多个组件(将该值作为 prop 的组件)重新呈现,则这可能是问题所在。
可能的解决方案:尝试将值与任何可能导致不必要呈现的属性分开。如果外部组件共享太多有状态数据,可以将它们移到父组件中。
1.值更新是多余的还是不具有时间敏感性?
可能的解决方案:在 prop 包含该值的任何组件中尝试React.useMemo,以缓存您可以缓存的任何计算。

相关问题