React解决this指向undefined问题的五种方式

为什么 Reate 要改变this的指向性问题

简单来说就是因为Reate中回调要使用this,并且使用的频率非常高,所以this指向必须是我们要掌握的

说明

本文章只是个人见解,是自己用于自己总结一些知识点的,有需要的小伙伴可以借鉴

方法一

1. 高阶函数(柯里化)🚀

高阶函数：通过 this 来直接调用 handleClick 并返回箭头函数。

🧐 柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式。

export default class user extends Component {
  state = {
    cound:0
  }
  //this的指向是什么就是看谁调用的
  addEvent() {
    return () => {
      console.log(this);
    }
  }
  render() {
    return (
      <button onClick={this.addEvent()}></button>
    )
  }
}

方法二🚊

2.包裹一层箭头函数。

箭头函数中的 this 指向“外部”，即 render 函数，而 render 函数中的 this 正是组件实例。

export default class user extends Component {
  state = {
    cound:0
  }
  addEvent() {
      console.log(this);
  }
  render() {
    return (
      <button onClick={() => this.addEvent()}></button>
    )
  }
}

方法三✈

3.使用bind

export default class user extends Component {
  state = {
    cound:0
  }
  addEvent() {
      console.log(this);
  }
  render() {
    return (
      <button onClick={this.addEvent.bind(this)}></button>
    )
  }
}

方法四🛩

4.通过赋值语句往实例上面添加一个箭头函数。

export default class user extends Component {
  state = {
    cound:0
  }
  addEvent = () => {
      console.log(this);
  }
  render() {
    return (
      <button onClick={this.addEvent.bind(this)}></button>
    )
  }
}

方法五🚅

5.在构造函数中再创建一个实例方法，和原型方法公用一个函数体。

class App extends React.Component {
  constructor() {
      super()
      this.state = {
          count: 0,
      }
      this.addClick = this.addClick.bind(this)
  }
  addClick() {
      console.log(this)
  }
  render() {
      return (
          <div>
              <button onClick={this.addClick}>+1</button>
          </div>
      )
  }
}