React事件处理函数的三种方式

在React组件中处理事件最容易出错的地方是事件处理函数中this的指向问题，因为ES6 class并不会为方法自动绑定this到当前对象。React事件处理函数的写法主要有三种方式，不同的写法解决this指向问题的方式也不同。

一、使用箭头函数

直接在React元素中采用箭头函数定义事件的处理函数，例如：

class MyComponent extends React.Component{
  constructor(props){
        super(props);
        this.state = {number:0};
  }
  
   render(){
       return(
          <button onClick={(event)=>{console.log(this.state.number);}} >
       )
   }
}

因为箭头函数中的this指向的是函数定义时的对象，所以可以保证this总是指向当前组件的实例对象。当事件处理逻辑比较复杂时，如果把所有的逻辑直接写在onClick的大括号内，就会导致 render函数变得臃肿，不容易直观地看出组件的UI结构，代码可读性也不好。这时，可以把逻辑封装成组件的一个方法，然后在箭头函数中调用这个方法。代码如下：

class MyComponent extends React.Component{
  constructor(props){
        super(props);
        this.state = {number:0};
  }

//每次点击一次Button，state中的number增加1
handleClick(event){
    const number = ++this.state.number;
    this.setState({
       number:number
    });
}
  
   render(){
       return(
        <div>
             <div>{this.state.number}</div>
              <button onClick={(event)=> {this.handleClick(event);}} >
        </div>
       )
   }
}

直接在render方法中为元素事件定义事件处理函数，最大的问题是，每次render调用时，都会重新创建一次新的事件处理函数，带来额外的性能开销，组件所处层级越低，这种开销就越大，因为任何一个上层组件的变化都可能会触发这个组件的render方法。当然，在大多数情况下，这种性能损失是可以不必在意的。

二、使用组件方法

直接将组件的方法赋值给元素事件属性，同时在类的构造函数中，将这个方法的this绑定到当前对象。例如：

class MyComponent extends React.Component{
  constructor(props){
        super(props);
        this.state = {number:0};
       this.handleClick = this.handleClick.bind(this);
  }

//每次点击一次Button，state中的number增加1
handleClick(event){
    const number = ++this.state.number;
    this.setState({
       number:number
    });
}
  
   render(){
       return(
        <div>
             <div>{this.state.number}</div>
              <button onClick={this.handleClick} >
        </div>
       )
   }
}

这种方式的好处是每次render不会重新创建一个回调函数，没有额外的性能损失。但在构造函数中，为事件处理函数绑定this，尤其是存在多个事件处理函数需要绑定时，这种模版式的代码还是会显得繁琐。
有些开发者还习惯在为元素的事件属性赋值时，同时为事件处理函数绑定this，例如：

class MyComponent extends React.Component{
  constructor(props){
        super(props);
        this.state = {number:0};
  }

//每次点击一次Button，state中的number增加1
handleClick(event){
    const number = ++this.state.number;
    this.setState({
       number:number
    });
}
  
   render(){
       return(
        <div>
             <div>{this.state.number}</div>
              <button onClick={this.handleClick.bind(this)} >
        </div>
       )
   }
}

使用bind会创建一个新的函数，因此这种写法依然存在每次render都会创建一个新的函数的问题。但在需要为处理函数传递额外参数时，这种写法就有了用武之地。例如，下面的例子需要为handleClick传入参数item

class MyComponent extends React.Component{
  constructor(props){
        super(props);
        this.state = {
           list:[1,2,3,4],
           current:1
        };
  }

//点击每一项时，将点击项设置为当前选中项，因此需要把点击项作为参数传递
handleClick(item,event){
    this.setState({
       current:item
    });
}
  
   render(){
       return(
          <ul>
               {this.state.list.map((item)=>({
                    /*bind除了绑定this,还绑定item作为参数，供handleClick使用 */
                    <li className={this.state.current ===item?'current':''} onClick={this.handleClick.bind(this,item)}>
                   </li>
                 }))}
          </ul>
       )
   }
}

三、属性初始化语法（property initializer syntax）

使用ES 7 的property initializers会自动为class中定义的方法绑定this。

class MyComponent extends React.Component{
  constructor(props){
        super(props);
        this.state = {number:0};
  }

//ES7 的属性初始化语法，实际上也是使用了箭头函数
handleClick ＝ (event)=>{
    const number = ++this.state.number;
    this.setState({
       number:number
    });
}
  
   render(){
       return(
        <div>
             <div>{this.state.number}</div>
              <button onClick={this.handleClick} >
        </div>
       )
   }
}

这种方式既不需要在构造函数中手动绑定this，也不需要担心组件重复渲染导致的函数重复创建问题。

摘自《React进阶之路》