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。