Question

我有一个更新本地状态的组件

class MyComponent extends Component {
    state = {
        number: 0
    }

    refreshState() {
        this.setState({number: this.state.number++})
    }


   render() {
       const key = '2018-12-13T10:00:00.000Z'
       return (
  <div>
        <CountDown
          until={getDurationLeft(key)}
          size={20}
          timeToShow={['H', 'M', 'S']}
        />
      <button onPress={() => this.refreshState()} />
   <div>
   )
}

getDurationLeft = key => {
    const date = new Date()
    return new Date(key).getTime() - date.getTime()) / 1000
}

倒数部分显示键和当前日期之间的剩余时间

但是每次我按下按钮时，函数“ getDurationLeft”都会重新计算

当我快速按下按钮时，时间刷新显示的秒数相同

请参阅gif http://recordit.co/mHz7AHCNuT

在这段视频中，我非常快地按下按钮

如何避免在状态刷新时重新计算getDurationLeft

谢谢

Answer 1

我解决了这个问题

shouldComponentUpdate() {
    return getDurationLeft(key) > 0
  }

避免在状态更新期间刷新组件内部的功能

1 个答案: