React中的事件绑定方法

为什么需要事件绑定？

• 由于类的方法默认不会绑定this，因此在调用的时候如果忘记绑定，this的值将会是undefined。
• 通常如果不是直接调用，应该为方法绑定this。

事件绑定方法

• 在构造函数中使用bind绑定this

constructor(props) {

super(props);

this.handleClick = this.handleClick.bind(this);

}

• 在函数调用时使用bind绑定this

<button onClick={this.handleClick.bind(this)}>

Click me

</button>

• 在调用的时候使用箭头函数绑定this

<button onClick={()=>this.handleClick()}>

Click me

</button>

• 使用属性初始化器语法绑定this

handleClick=()=>{

console.log('this is:', this);

}

几种方法的比较

• 方法2、3是在调用的时候绑定，优点是不调用的时候就无需绑定，写法简单，问题是如果调用次数很多的话，每一次都会绑定一个新的方法实例，因此对性能有影响
• 方法1是在构造的时候绑定，因此只会绑定一个方法实例，问题是不管有没有调用都会进行绑定
• 方法4在创建方法时就绑定this，不需要在类构造函数中绑定，调用的时候不需要再作绑定。问题是仍是实验性语法，需要bable来转译。