绑定事件的写法

通常我们会在类里面使用

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }
  addN(){
    this.setState({
      n: this.state.n + 1
    });
  };
  render() {
    return (
      <div className="App">
        <button onClick={()=>this.addN()}>+1</button>
        {this.state.n}
      </div>
    );
  }
}

来绑定事件addN，但是这样写太麻烦了，经过es6的升级后可以这样写

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      n: 0
    };
  }
  addN = () => {
    this.setState({
      n: this.state.n + 1
    });
  };
  render() {
    return (
      <div className="App">
        <button onClick={this.addN}>+1</button>
        {this.state.n}
      </div>
    );
  }
}

把addN变成一个箭头函数去使用，使得其的this不会因为onClick改变
当我们点击button的时候，实际上是进行了一个button.onClick.call(null,event)的操作，但是由于我们把addN变成了一个箭头函数，所以其的this不会被call改变，这在这里是一个好处，所以以后我们就这样写方便多了