React处理事件

在回调函数中使用箭头函数

优势：很容易让人看懂。
缺点：
在每次render时候，都会产生一个匿名函数。如果此组件作为一个子组件，那么父组件render的时候，子组件也可能会重新渲染，消耗性能。

class ToggleBtn extends React.component{
	constructor(){
		super();
		this.state = {
			isToggleOn:true
		}
	}
	handleClick(e){
		this.setState({
			isToggleOn:!this.state.isToggleOn
		})
	}
	render(){
		return(
			<div>
				<button onClick={(e) => this.handleClick(e)}>{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
			</div>
		)
	}
}

在构造器中绑定this

优势：通用。
缺点：繁琐，每次都得手动绑定this。

class ToggleBtn extends React.Component{
	constructor(){
		super()
		this.state = { 
			isToggleOn:true
		}
		// 这个bind方法是必须的，以确保`this`可以在回调函数handleClick中使用
		this.handleClick = this.handleClick.bind(this);
	}
	handleClick(e){
		this.setState({
			isToggleOn:!this.state.isToggleOn
		})
	}
	render(){
		return(
			<div>
				<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
			</div>
		)
	}
}

使用类字段语法

优点：简单方便
缺点：ES7功能，实验性属性，可能不兼容，需要babel处理

class ToggleBtn extends React.Component{
	constructor(){
		super();
		this.state = {
			isToggleOn:true
		}
	}
	// 这个语法确保`this` 绑定在handleClick中
	handleClick = (e) =>{
		this.setState({
			isToggleOn:!this.state.isToggleOn
		})
	}
	render(){
		return(
			<div>
				<button onClick={this.handleClick}>weiqinl-{this.state.isToggleOn ? 'ON' : 'OFF'}</button>
			</div>
		)
	}
}