React Naive 解决防止多次点击的解决方法

export default class TouchableOpacity extends Component {
  render() {
    return (
        <TouchableOpacity activeOpacity={0.85}
          style={style?style:{}}
          onPress={this.debouncePress(this.props.onPress)}>
          {this.props.children}
        </TouchableOpacity>
    )
  }
  debouncePress = onPress => () => {
     const clickTime = Date.now()
     if (!this.lastClickTime ||
        Math.abs(this.lastClickTime - clickTime) > 1000) {
        this.lastClickTime = clickTime
        onPress()
     }
  }
}

将lastClickTime保存在合适的位置，确保重新render时也不会丢失!

将lastClickTime保存在this的属性里。触发render后，React会对组件进行diff，对于同一个组件不会再次创建，lastClickTime可以存下来。

另外，网上有的防止重复点击的方法是将lastClickTime保存在state里，由于setState会触发render，感觉多此一举。有的还利用了setTimeout，觉得对于简单的场景也没必要使用setTimeout。