Question

好吧，所以我要构建的应用程序具有一项功能，您可以选择在圆圈上显示的某些日期，并且当您长时间触摸并围绕该圆圈摆动时，它们也会随之变化。当我必须更改所选日期时，我正在使用PanResponder和setstate。它有些迟钝，但是我发现它是导致代码循环的原因之一，因此我对其进行了更改。然后，当我发布发行版本时，它开始像更改前那样缓慢（我正在使用远程调试在调试模式下对其进行测试）。你知道是什么原因吗？

编辑：那是我的代码：

panResponder = PanResponder.create({
onStartShouldSetPanResponder: evt => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onPanResponderGrant: evt => this.handleTouch(evt),
onPanResponderMove: (evt, gestureState) => this.handleTouch(evt)
});



getLineLength(initX, x, initY, y) {
    return Math.sqrt(Math.pow(x - initX, 2) + Math.pow(y - initY, 2));
  }

  getCos(a, b, c) {
    return (Math.pow(a, 2) + Math.pow(b, 2) - Math.pow(c, 2)) / (2 * a * b);
  }

//function for finding which day is selected
//periodDays = periodLength
  handleTouch(evt) {
    if (evt.nativeEvent.touches.length == 1) {

      if (this.middleOfCircle) {
        let x = evt.nativeEvent.pageX - this.middleOfCircle.x,
          y = -(evt.nativeEvent.pageY - this.middleOfCircle.y),
          topY = this.height,
          aLen = this.getLineLength(0, 0, 0, topY),
          bLen = this.getLineLength(0, x, 0, y),
          cLen = this.getLineLength(0, x, topY, y),
          angle =
            x >= 0
              ? (Math.acos(this.getCos(aLen, bLen, cLen)) * 180) / Math.PI
              : 360 - (Math.acos(this.getCos(aLen, bLen, cLen)) * 180) / Math.PI,
          chosenDay = ~~(angle / (360.0 / this.props.periodDays) + 0.5) + 1;
        if (chosenDay > this.props.periodDays) chosenDay = 1;
        if (this.props.cycleDay != chosenDay) this.props.changeSelectedDay(chosenDay);
      }
      this.counter = 0;
    }
  }

在更高的组件中，我传递了如下功能来更改日期：

changeSelectedDay={day =>
      this.setState(prevState => {
        if (prevState.selectedDay != day) return { selectedDay: day };
      })
    }

然后我通过.map函数渲染所有内容：

//xyValues are a and y values of each view, calculated in componentDidMount
circleOfDates = this.state.xyValues.map((value, i) => (
    //view for every text

    <View
      style={{
        width: 25,
        position: "absolute",
        left: value[0] + CIRCLESIZE + 8,
        bottom: value[1] + CIRCLESIZE + 11,
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center"
      }}
      key={value[2]}>
      {this.getText(i, this.state.xyValues.length)}
    </View>
  ));

调试时的更新速度比发行版中的更新速度慢

0 个答案: