React 事件绑定

类组件事件绑定

class MyComponent extends React.Component {
    addN = () => this.setState({n: this.state.n + 1});
    render() {
      return <button onClick={this.addN}> n+1</button>
  }
}

函数在对象上

函数定义在 constructor 中，创建实例时出现在实例自身上
函数里的 this 永远指向实例
一般使用这种写法

class MyComponent extends React.Component {
    constructor() {
    super();
    this.state = {n: 0};
      this.addN2 = () => this.setState({n: this.state.n + 1}); // 两种写法等价
  }
    addN1 = () => this.setState({n: this.state.n + 1});    // 两种写法等价
}

函数在原型上

函数在原型上（obj.prototype），与 Java 里的静态属性一样，所有实例共用同一个函数，创建实例时出现在实例的 __proto__ 里
函数里的 this 可能变成 window

class MyComponent extends React.Component {
    addN1() {
      this.setState({n: this.state.n + 1})
  }
  addN2: function() {
      this.setState({n: this.state.n + 1})
  }
}