react 类组件的 this 指向

react 类组件的 this 指向

【引言】react 与原生的js很相近，其中许多问题也是js原生会碰到的问题，下面是一个this指向问题
【问题】React的类组件由React对其进行实例化，所以在React类组件内部的this指向都是当前组件的实例化对象。但是，在做事件处理的时候，类内部自定义的普通函数的this却又指向了undefined。

测试两个地方的调用有什么不同：

1. 直接通过this调用
2. 先绑定到 onClick 事件上然后再调用

import React from 'react'

export default class Bs extends React.Component {
// 首先在原型上定义了一个方法
  handleClick(){
    console.log(this);
  }

  render() {
    return (
      <div>
      {this.handleClick() }    // Bs
        <button
        onClick={this.handleClick}   // undefined
        >点击</button>
      </div>
    )
  }
}

可见：

1. 直接通过this调用 ，返回 Bs实例
2. 先绑定到 onClick 事件上然后再调用 ， 返回undefined

知识讲解：

1. 原生js：默认的react中this指向当前实例对象，但是当将其中的方法赋值给一个‘变量’时，相当于onClick=function(){console.log(this)},此时this指向发生变化，指向window对象
2. 但是在react中略有不同，凡是指向window对象的，一律转为undefined
   1. react的原理是：react开启了 js严格模式，而严格模式只有 匿名函数受影响，原本指向window的匿名函数，如今只能指向undefined

解决方案：
4. 绑定到方法的时候包一层箭头函数 this.handleClick.bind(this)
5. 通过bind改变this指向 handleClick = () => {}

如下：

import React from 'react'

export default class Bs extends React.Component {
  handleClick(){
    console.log(this);
  }
  render() {
    return (
      <div>
        <button
       // onClick={()=>{this.handleClick()}}
       // onClick={this.handleClick.bind(this)}
        >点击</button>
      </div>
    )
  }
}