React笔记之事件绑定的写法

类组件的事件绑定

1. <button onClick={() => this.addN()}>n+1</button>

   这种写法是正常的，传一个函数给onClick即可，注意大小写。

2. <button onClick={this.addN}>n+1</button>

   这种写法是错误的，这样会使得 this.addN 里的 this 变成 window ，

   下面我们换几种正确的写法

   1. <button onClick={this.addN.bind(this)}>n+1</button>

      这样写就可以了，这样就把this绑定为当前的this，而不会变成window了。

   2. 给箭头函数取一个名字，

   this._addN = () => this.addN()

   然后

   <button onClick={this._addN}>n+1</button>

   即可。

   3. 直接将 addN 改为箭头函数

   constructor() {
       this.addN = () => this.setState({n: this.state.n + 1})
   }
   render() {
       return <button onClick={this.addN}>n+1</button>
   }
   

   4. 最终写法

      直接在类组件中写

      addN = () => this.setState({n: this.state.n + 1})

      render() {
          return <button onClick={this.addN}>n+1</button>
      }
      

写法之间的区别

写法一：

class Son extends React.Component {
	addN = () => this.setState({n: this.state.n + 1}) // 这种写法等价于下面的写法，这里少写了一个this
  constructor() {
  	this.addN = () => this.setState({n: this.state.n + 1}) // 与上面的写法相等
  }
}

写法二：

class Son extends React.Component {
	//与下面的写法相同
	addN() {
  	this.setState({n: this.state.n + 1})
  }
  //与上面的写法相同
  addN: function() {
  	this.setState({n: this.state.n + 1})
  }
}

写法一的区别和写法二的区别在于，一的方法是挂在对象上的，二的方法是挂在原型上的，下面我们来验证一下：

写法一直接把方法用箭头函数写时，new 一个对象出来时，方法是直接挂在对象上的，下图见证：

写法二直接把方法写在类里，new 一个对象出来时，方法是直接挂在原型链上的，下图见证：

写法一的this是不可变的，一直指向创建的对象，写法二的this由调用者决定，可能变成其他的对象，

因为函数箭头不接受this，也就是上面的说法，只属于创建它的对象。