react绑定事件的几种写法和理解

参考react绑定事件的几种写法 - 简书 (jianshu.com)，在他的分类上写上自己的理解

错误方法

import React from 'react';
class App extends React.Component {
  handleClick() {
    alert('点击')
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}
export default App;

handleClick并非实例对象调用，相当于如下：

class Person{
    study(){
        console.log(this) //测试能够访问到this
    }
}

p1 = new Person()
p1.study // 可以访问到this
const x = p1.study //此时只是把Person类中的这个study函数交给了x
x()  //当通过x地址访问时，study()函数并不是由实例访问的，this无法指向this实例对象，

render的时候，把handleClick这个函数直接交给了onClick，类似于上面的把study函数直接交给了x，就会导致this不指向类的实例对象，谁调用就指向谁，指向调用onClick的react对象

关注点：

把什么给了onClick，this指向如何？
不要在乎原型对象，和原型对象实例对象两者的关系无关！

方法一：最麻烦的写法，不推荐

每次页面刷新都会调用render函数

用bind(this)重新生成一个函数，其中bind的第一个参数表示把新函数的this修改为参数的this，也就是App实例对象的组件的this

此时分析一下this指向谁？怎么执行到这里的？ react实例化一个App，然后调用render进行渲染，那此时就是实例化的app = new App()执行的，此时this就是指向app

把修改过this指向的handleClick复制版交给onClick，然后就能运行正确

import React from 'react';
class App extends React.Component {
  handleClick() {
    alert('点击')
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>click</button>
      </div>
    )
  }
}
export default App;

方法二：在构造函数里统一绑定，不常用。

构造时绑定好，每次页面刷新都会调用render函数，无非是比第一种先绑定好，页面还没render时就直接绑定好了

构造函数也是实例对象调用的（只是说明实例对象和原型对象的this，好像也没涉及原型对象）

import React from 'react';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    alert('点击')
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}
export default App;

方法三：最常见的写法。

箭头函数的this指向外侧

把一个属性名为handleClick的属性交给onClick，handleClick对应一个函数，普通函数的function不是该类实例对象调用时，this是会丢失的，而箭头函数能够在交给别人执行时，

import React from 'react';
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    alert('点击')
  }
  //下面的错误
   handleClick = function() => {
    alert('点击')
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}
export default App;

class Person{
    study(){
        console.log(this) //测试能够访问到this
    }
    study2 = function(){
        console.log(this) //测试能够访问到this
    }
    study3 = ()=>{
        console.log(this)
    }
}

p1 = new Person()
p1.study // 可以访问到this
const x = p1.study //此时只是把Person类中的这个study函数交给了x
x()  //当通过x地址访问时，study()函数并不是由实例访问的，this无法指向this实例对象，
const x2 = p1.study2 
x2()  //当通过x地址访问时，study()函数并不是由实例访问的，this无法指向this实例对象，
const x3 = p1.study3 
x3()  //当通过x地址访问时，study()函数并不是由实例访问的，this却能够指向this实例对象，

const x3 = p1.study3的时候study3内部的this就已经是p1了

方法四：可以传参数。

给onClick赋值时就是给绑定了一个箭头函数(e) => this.handleClick(e)

箭头函数指向外侧this，就是此时onClick赋值时，正在执行render的实例对象，

然后onClick触发时，和方法三不同，此时调用发生，执行下面的箭头函数

(e) => this.handleClick(e)

箭头函数执行内部的this.handleClick(e)

this是谁？就是刚才的：正在执行render的实例对象

那么由 正在执行render的实例对象 执行的handleClick就是实例对象调用的，this指向就没问题了

import React from 'react';
class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick (e) {
    alert(e)
  }
  render() {
    return (
      <div>
        <button onClick={(e) => this.handleClick(e)}>click</button>
      </div>
    )
  }
}
export default App;