Tips——RN构造函数内绑定导致页面交互卡顿

一、问题

一个复杂的页面，需将事件函数绑定到相应的button组件上，绑定方式如下：

constructor(props) {
    super(props);

    this._onDayPress = this._onDayPress.bind(this);
    this._onMonthPress = this._onMonthPress.bind(this);
    this._onWeekPress = this._onWeekPress.bind(this);                  
}    

<Button 
  type="primary" 
  size="small" 
  style={{  70, height: 30 }} 
  onPress={this._onMonthPress()}
>
 MONTH
</Button> 

结果导致界面卡顿，用户交互事件延迟等现象。

二、原因

首先，构造函数内绑定事件无法进行点击传值。其次，上述传值方式不符合官方onPress接口的定义，即，接受一个函数作为参数，因此存在用法错误。

三、解决

换另一种绑定方式：button函数内绑定即可。

<Button 
  type="primary" 
  size="small" 
  style={{  70, height: 30 }} 
  onPress={this._onMonthPress.bind(this)}
>
 MONTH
</Button>